Merge branch 'master' into colour-improvements

Increase browser test timeout for slower CI runners
Add missing from-version markers to colour docs
2026-07-26 13:38:54 +00:00 · 2026-07-23 17:27:52 +01:00 · 2026-07-23 17:20:13 +01:00 · 2026-07-23 13:45:21 +01:00 · 2026-07-23 13:45:21 +01:00 · 2026-07-23 13:32:19 +01:00
221 changed files with 4911 additions and 510 deletions
@@ -58,10 +58,14 @@ LayoutSwitcher/Caption: Layout
 LoadedModules/Caption: Loaded Modules
 LoadedModules/Hint: These are the currently loaded tiddler modules linked to their source tiddlers. Any italicised modules lack a source tiddler, typically because they were setup during the boot process.
 Palette/Caption: Palette
+Palette/Customisations/Prompt: Customisations for the current palette: <<palette-link>>
+Palette/Customisations/Reset/Caption: reset customisations
+Palette/Editor/Customised/Prompt: This palette has customisations that override the entries marked below
+Palette/Editor/Customised/Entry: overridden by a customisation
 Palette/Editor/Clone/Caption: clone
 Palette/Editor/Clone/Prompt: It is recommended that you clone this shadow palette before editing it
 Palette/Editor/Delete/Hint: delete this entry from the current palette
-Palette/Editor/Names/External/Show: Show color names that are not part of the current palette
+Palette/Editor/Names/External/Show: Show inherited palette entries
 Palette/Editor/Prompt/Modified: This shadow palette has been modified
 Palette/Editor/Prompt: Editing
 Palette/Editor/Reset/Caption: reset
@@ -30,6 +30,8 @@ Error/DeserializeOperator/MissingOperand: Filter Error: Missing operand for 'des
 Error/DeserializeOperator/UnknownDeserializer: Filter Error: Unknown deserializer provided as operand for the 'deserialize' operator
 Error/Filter: Filter error
 Error/FilterSyntax: Syntax error in filter expression
+Error/FilterPragma: Filter Error: Unknown filter pragma
+Error/FilterPragmaPosition: Filter Error: Filter pragmas are only allowed at the start of a filter
 Error/FilterRunPrefix: Filter Error: Unknown prefix for filter run
 Error/IsFilterOperator: Filter Error: Unknown parameter for the 'is' filter operator
 Error/FormatFilterOperator: Filter Error: Unknown suffix for the 'format' filter operator
@@ -31,8 +31,7 @@ function FramedEngine(options) {
 	this.parentNode.insertBefore(this.iframeNode,this.nextSibling);
 	this.iframeDoc = this.iframeNode.contentWindow.document;
 	// (Firefox requires us to put some empty content in the iframe)
-	var paletteTitle = this.widget.wiki.getTiddlerText("$:/palette");
-	var colorScheme = (this.widget.wiki.getTiddler(paletteTitle) || {fields: {}}).fields["color-scheme"] || "light";
+	var colorScheme = (this.widget.wiki.getTiddler("$:/temp/palette-colours") || {fields: {}}).fields["color-scheme"] || "light";
 	this.iframeDoc.open();
 	this.iframeDoc.write("<!DOCTYPE html><html><head><meta name='color-scheme' content='" + colorScheme + "'></head><body></body></html>");
 	this.iframeDoc.close();
@@ -28,7 +28,12 @@ function SimpleEngine(options) {
 	if(this.widget.editTag === "textarea") {
 		this.domNode.appendChild(this.widget.document.createTextNode(this.value));
 	} else {
-		this.domNode.value = this.value;
+		if(this.widget.editType === "color") {
+			// The <input type="color"> element requires a six digit hex value
+			this.domNode.value = $tw.utils.convertCSSColorToRGBString(this.value);
+		} else {
+			this.domNode.value = this.value;
+		}
 	}
 	// Set the attributes
 	if(this.widget.editType && this.widget.editTag !== "textarea") {
@@ -83,6 +88,9 @@ Update the DomNode with the new text
 */
 SimpleEngine.prototype.updateDomNodeText = function(text) {
 	try {
+		if(this.widget.editType === "color") {
+			text = $tw.utils.convertCSSColorToRGBString(text);
+		}
 		this.domNode.value = text;
 	} catch(e) {
 		// Ignore
@@ -217,10 +217,11 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 	EditTextWidget.prototype.refresh = function(changedTiddlers) {
 		var changedAttributes = this.computeAttributes();
 		// Completely rerender if any of our attributes have changed
-		if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup ||  changedAttributes.rows || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedAttributes.autocomplete || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE] || changedTiddlers["$:/palette"] || changedAttributes.disabled || changedAttributes.fileDrop) {
+		if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup ||  changedAttributes.rows || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedAttributes.autocomplete || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE] || changedTiddlers["$:/palette"] || changedAttributes.disabled || changedAttributes.fileDrop) {
 			this.refreshSelf();
 			return true;
-		} else if(changedTiddlers[this.editRefreshTitle]) {
+		} else if(changedAttributes["default"] || changedTiddlers[this.editRefreshTitle]) {
+			this.editDefault = this.getAttribute("default");
 			this.engine.updateDomNodeText(this.getEditInfo().value);
 		} else if(changedTiddlers[this.editTitle]) {
 			var editInfo = this.getEditInfo();
@@ -146,14 +146,16 @@ exports.parseFilter = function(filterString) {
 		match;
 	var whitespaceRegExp = /(\s+)/mg,
 		// Groups:
-		// 1 - entire filter run prefix
-		// 2 - filter run prefix itself
-		// 3 - filter run prefix suffixes
-		// 4 - opening square bracket following filter run prefix
-		// 5 - double quoted string following filter run prefix
-		// 6 - single quoted string following filter run prefix
-		// 7 - anything except for whitespace and square brackets
-		operandRegExp = /((?:\+|\-|~|(?:=>?)|\:(\w+)(?:\:([\w\:, ]*))?)?)(?:(\[)|(?:"([^"]*)")|(?:'([^']*)')|([^\s\[\]]+))/mg;
+		// 1 - pragma
+		// 2 - pragma suffix
+		// 3 - entire filter run prefix
+		// 4 - filter run prefix name
+		// 5 - filter run prefix suffixes
+		// 6 - opening square bracket following filter run prefix
+		// 7 - double quoted string following filter run prefix
+		// 8 - single quoted string following filter run prefix
+		// 9 - anything except for whitespace and square brackets
+		operandRegExp = /(?:::(\w+)(?:\:(\w+))?(?=\s|$)|((?:\+|\-|~|(?:=>?)|:(\w+)(?:\:([\w\:, ]*))?)?)(?:(\[)|(?:"([^"]*)")|(?:'([^']*)')|([^\s\[\]]+)))/mg;
 	while(p < filterString.length) {
 		// Skip any whitespace
 		whitespaceRegExp.lastIndex = p;
@@ -170,18 +172,23 @@ exports.parseFilter = function(filterString) {
 			};
 			match = operandRegExp.exec(filterString);
 			if(match && match.index === p) {
-				// If there is a filter run prefix
 				if(match[1]) {
-					operation.prefix = match[1];
+					// If there is a filter pragma
+					operation.pragma = match[1];
+					operation.suffix = match[2];
+					p = match.index + match[0].length;
+				} else if(match[3]) {
+					// If there is a filter run prefix
+					operation.prefix = match[3];
 					p = p + operation.prefix.length;
 					// Name for named prefixes
-					if(match[2]) {
-						operation.namedPrefix = match[2];
+					if(match[4]) {
+						operation.namedPrefix = match[4];
 					}
 					// Suffixes for filter run prefix
-					if(match[3]) {
+					if(match[5]) {
 						operation.suffixes = [];
-						$tw.utils.each(match[3].split(":"),function(subsuffix) {
+						$tw.utils.each(match[5].split(":"),function(subsuffix) {
 							operation.suffixes.push([]);
 							$tw.utils.each(subsuffix.split(","),function(entry) {
 								entry = $tw.utils.trim(entry);
@@ -193,7 +200,7 @@ exports.parseFilter = function(filterString) {
 					}
 				}
 				// Opening square bracket
-				if(match[4]) {
+				if(match[6]) {
 					p = parseFilterOperation(operation.operators,filterString,p);
 				} else {
 					p = match.index + match[0].length;
@@ -203,9 +210,9 @@ exports.parseFilter = function(filterString) {
 				p = parseFilterOperation(operation.operators,filterString,p);
 			}
 			// Quoted strings and unquoted title
-			if(match[5] || match[6] || match[7]) { // Double quoted string, single quoted string or unquoted title
+			if(match[7] || match[8] || match[9]) { // Double quoted string, single quoted string or unquoted title
 				operation.operators.push(
-					{operator: "title", operands: [{text: match[5] || match[6] || match[7]}]}
+					{operator: "title", operands: [{text: match[7] || match[8] || match[9]}]}
 				);
 			}
 			results.push(operation);
@@ -230,23 +237,26 @@ exports.getFilterRunPrefixes = function() {
 	return this.filterRunPrefixes;
 };

-exports.filterTiddlers = function(filterString,widget,source) {
-	var fn = this.compileFilter(filterString);
+exports.filterTiddlers = function(filterString,widget,source,options) {
+	var fn = this.compileFilter(filterString,options);
 	return fn.call(this,source,widget);
 };

 /*
-Compile a filter into a function with the signature fn(source,widget) where:
+Compile a filter into a function with the signature fn(source,widget,options) where:
 source: an iterator function for the source tiddlers, called source(iterator), where iterator is called as iterator(tiddler,title)
 widget: an optional widget node for retrieving the current tiddler etc.
 */
-exports.compileFilter = function(filterString) {
+exports.compileFilter = function(filterString,options) {
+	var defaultFilterRunPrefix = (options || {}).defaultFilterRunPrefix || "or",
+		seenNonPragmaOperation = false;
+	var cacheKey = filterString + "|" + defaultFilterRunPrefix;
 	if(!this.filterCache) {
 		this.filterCache = Object.create(null);
 		this.filterCacheCount = 0;
 	}
-	if(this.filterCache[filterString] !== undefined) {
-		return this.filterCache[filterString];
+	if(this.filterCache[cacheKey] !== undefined) {
+		return this.filterCache[cacheKey];
 	}
 	var filterParseTree;
 	try {
@@ -325,7 +335,8 @@ exports.compileFilter = function(filterString) {
 					regexp: operator.regexp
 				},{
 					wiki: self,
-					widget: widget
+					widget: widget,
+					defaultFilterRunPrefix: defaultFilterRunPrefix
 				});
 				if($tw.utils.isArray(results)) {
 					accumulator = self.makeTiddlerIterator(results);
@@ -346,29 +357,60 @@ exports.compileFilter = function(filterString) {
 		var filterRunPrefixes = self.getFilterRunPrefixes();
 		// Wrap the operator functions in a wrapper function that depends on the prefix
 		operationFunctions.push((function() {
-			var options = {wiki: self, suffixes: operation.suffixes || []};
-			switch(operation.prefix || "") {
-				case "": // No prefix means that the operation is unioned into the result
-					return filterRunPrefixes["or"](operationSubFunction, options);
-				case "=": // The results of the operation are pushed into the result without deduplication
-					return filterRunPrefixes["all"](operationSubFunction, options);
-				case "-": // The results of this operation are removed from the main result
-					return filterRunPrefixes["except"](operationSubFunction, options);
-				case "+": // This operation is applied to the main results so far
-					return filterRunPrefixes["and"](operationSubFunction, options);
-				case "~": // This operation is unioned into the result only if the main result so far is empty
-					return filterRunPrefixes["else"](operationSubFunction, options);
-				case "=>": // This operation is applied to the main results so far, and the results are assigned to a variable
-					return filterRunPrefixes["let"](operationSubFunction, options);
-				default: 
-					if(operation.namedPrefix && filterRunPrefixes[operation.namedPrefix]) {
-						return filterRunPrefixes[operation.namedPrefix](operationSubFunction, options);
-					} else {
+			if(operation.pragma) {
+				// Pragmas are only allowed at the start of a filter, before any runs
+				if(seenNonPragmaOperation) {
+					return function(results,source,widget) {
+						results.clear();
+						results.push($tw.language.getString("Error/FilterPragmaPosition"));
+					};
+				}
+				switch(operation.pragma) {
+					case "defaultprefix":
+						defaultFilterRunPrefix = operation.suffix || "or";
+						break;
+					default:
 						return function(results,source,widget) {
 							results.clear();
-							results.push($tw.language.getString("Error/FilterRunPrefix"));
+							results.push($tw.language.getString("Error/FilterPragma"));
 						};
-					}
+				}
+				return function(results,source,widget) {
+					// Dummy response
+				};
+			} else {
+				seenNonPragmaOperation = true;
+				var options = {wiki: self, suffixes: operation.suffixes || []};
+				switch(operation.prefix || "") {
+					case "": // Use the default filter run prefix if none is specified
+						if(filterRunPrefixes[defaultFilterRunPrefix]) {
+							return filterRunPrefixes[defaultFilterRunPrefix](operationSubFunction, options);
+						} else {
+							return function(results,source,widget) {
+								results.clear();
+								results.push($tw.language.getString("Error/FilterRunPrefix"));
+							};
+						}
+					case "=": // The results of the operation are pushed into the result without deduplication
+						return filterRunPrefixes["all"](operationSubFunction, options);
+					case "-": // The results of this operation are removed from the main result
+						return filterRunPrefixes["except"](operationSubFunction, options);
+					case "+": // This operation is applied to the main results so far
+						return filterRunPrefixes["and"](operationSubFunction, options);
+					case "~": // This operation is unioned into the result only if the main result so far is empty
+						return filterRunPrefixes["else"](operationSubFunction, options);
+					case "=>": // This operation is applied to the main results so far, and the results are assigned to a variable
+						return filterRunPrefixes["let"](operationSubFunction, options);
+					default: 
+						if(operation.namedPrefix && filterRunPrefixes[operation.namedPrefix]) {
+							return filterRunPrefixes[operation.namedPrefix](operationSubFunction, options);
+						} else {
+							return function(results,source,widget) {
+								results.clear();
+								results.push($tw.language.getString("Error/FilterRunPrefix"));
+							};
+						}
+				}
 			}
 		})());
 	});
@@ -407,7 +449,7 @@ exports.compileFilter = function(filterString) {
 		this.filterCache = Object.create(null);
 		this.filterCacheCount = 0;
 	}
-	this.filterCache[filterString] = fnMeasured;
+	this.filterCache[cacheKey] = fnMeasured;
 	this.filterCacheCount++;
 	return fnMeasured;
 };
@@ -0,0 +1,21 @@
+/*\
+title: $:/core/modules/filters/changecount.js
+type: application/javascript
+module-type: filteroperator
+
+Filter operator for retrieving the changecount for each title in the list.
+
+\*/
+
+"use strict";
+
+/*
+Export our filter function
+*/
+exports.changecount = function(source,operator,options) {
+	var results = [];
+	source(function(tiddler,title) {
+		results.push(options.wiki.getChangeCount(title) + "");
+	});
+	return results;
+};
@@ -0,0 +1,158 @@
+/*\
+title: $:/core/modules/filters/colour-ops.js
+type: application/javascript
+module-type: filteroperator
+
+Filter operators for colour operations
+
+\*/
+
+"use strict";
+
+var Color = require("$:/core/modules/utils/dom/color.js").Color,
+	colourSpacesList = Object.keys(Color.spaces),
+	hueAdjustersList = ["raw","increasing","decreasing","longer","shorter"];
+
+exports["colour-lighten"] = makeSerialColourOperator(function (colour, operator, options) {
+	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)).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];
+		// Hue is null for achromatic colours
+		if(colour === null || colour === undefined || Number.isNaN(colour)) {
+			return "";
+		}
+	}
+	return colour.toString();
+});
+
+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);
+	}
+	return colour.display().toString();
+});
+
+exports["colour-set-alpha"] = makeSerialColourOperator(function (colour, operator, options) {
+	colour.alpha = $tw.utils.parseNumber(operator.operand);
+	return colour.display().toString();
+});
+
+exports["colour-composite"] = makeSerialColourOperator(function (colour, operator, options) {
+	// Composite each translucent input colour over the backdrop given in the operand
+	var backdrop = $tw.utils.parseCSSColorObject(operator.operand);
+	if(backdrop && colour.alpha < 1) {
+		var alpha = colour.alpha;
+		colour.alpha = 1;
+		colour = backdrop.mix(colour,alpha,{space: "srgb"});
+	}
+	return colour.display().toString();
+});
+
+exports["colour-contrast"] = makeParallelColourOperator(function (colours, operator, options) {
+	var colourContrasts = [];
+	$tw.utils.each(colours,function(colour,index) {
+		if(!colour) {
+			colour = $tw.utils.parseCSSColorObject("white");
+			colours[index] = colour;
+		}
+		if(index > 0) {
+			colourContrasts.push(colour.contrast(colours[index - 1],"DeltaPhi").toString());
+		}
+	});
+	return colourContrasts;
+});
+
+exports["colour-best-contrast"] = makeParallelColourOperator(function (colours, operator, options, originalColours) {
+	var bestContrast = 0,
+		bestColour = null;
+	if(colours.length < 2) {
+		return [];
+	}
+	var targetColour = colours[colours.length - 1];
+	if(!targetColour) {
+		return [];
+	}
+	for(var t=0; t<colours.length; t++) {
+		var colour = colours[t];
+		if(colour) {
+			var contrast = colour.contrast(targetColour,"DeltaPhi");
+			if(contrast > bestContrast) {
+				bestContrast = contrast;
+				bestColour = originalColours[t];
+			}
+		}
+	}
+	if(bestColour) {
+		return [bestColour];
+	} else {
+		return [];
+	}
+});
+
+exports["colour-interpolate"] = function(source,operator,options) {
+	// Get the colour space suffix
+	var space = ((((operator.suffixes || [])[0] || ["srgb"])[0]) || "").toLowerCase();
+	if(colourSpacesList.indexOf(space) === -1) {
+		space = "lch";
+	}
+	// Get the hue adjuster suffix
+	var hueAdjuster = ((((operator.suffixes || [])[1] || ["shorter"])[0]) || "").toLowerCase();
+	if(hueAdjustersList.indexOf(hueAdjuster) === -1) {
+		hueAdjuster = "shorter";
+	}
+	// Get the colours
+	if(operator.operands.length < 2) {
+		return [];
+	}
+	var colourA = $tw.utils.parseCSSColorObject(operator.operands[0]),
+		colourB = $tw.utils.parseCSSColorObject(operator.operands[1]);
+	if(!colourA || !colourB) {
+		return [];
+	}
+	var rangefn = colourA.range(colourB,{space: space, hue: hueAdjuster});
+	// Cycle through the weights
+	var results = [];
+	source(function(tiddler,title) {
+		var index = $tw.utils.parseNumber(title);
+		var colour = rangefn(index);
+		results.push(colour.display().toString());
+	});
+	return results;
+};
+
+function makeSerialColourOperator(fn) {
+	return function (source, operator, options) {
+		var results = [];
+		source(function (tiddler, title) {
+			var c = $tw.utils.parseCSSColorObject(title);
+			if(c) {
+				c = fn(c, operator, options);
+				results.push(c);
+			} else {
+				results.push("");
+			}
+		});
+		return results;
+	};
+}
+
+function makeParallelColourOperator(fn) {
+	return function (source, operator, options) {
+		var originalColours = [],
+			colours = [];
+		source(function (tiddler, title) {
+			originalColours.push(title);
+			colours.push($tw.utils.parseCSSColorObject(title));
+		});
+		return fn(colours, operator, options, originalColours);
+	};
+}
@@ -13,7 +13,9 @@ Filter operator returning those input titles that pass a subfilter
 Export our filter function
 */
 exports.filter = function(source,operator,options) {
-	var filterFn = options.wiki.compileFilter(operator.operand),
+	var suffixes = operator.suffixes || [],
+		defaultFilterRunPrefix = (suffixes[0] && suffixes[0][0]) || options.defaultFilterRunPrefix || "or",
+		filterFn = options.wiki.compileFilter(operator.operand,{defaultFilterRunPrefix}),
 		results = [],
 		target = operator.prefix !== "!";
 	source(function(tiddler,title) {
@@ -13,7 +13,9 @@ Filter operator returning its operand evaluated as a filter
 Export our filter function
 */
 exports.subfilter = function(source,operator,options) {
-	var list = options.wiki.filterTiddlers(operator.operand,options.widget,source);
+	var suffixes = operator.suffixes || [],
+		defaultFilterRunPrefix = (suffixes[0] && suffixes[0][0]) || options.defaultFilterRunPrefix || "or";
+	var list = options.wiki.filterTiddlers(operator.operand,options.widget,source,{defaultFilterRunPrefix});
 	if(operator.prefix === "!") {
 		var results = [];
 		source(function(tiddler,title) {
@@ -26,25 +26,26 @@ exports.params = [
 Run the macro
 */
 exports.run = function(target,fallbackTarget,colourA,colourB) {
-	var rgbTarget = $tw.utils.parseCSSColor(target) || $tw.utils.parseCSSColor(fallbackTarget);
+	var rgbTarget = $tw.utils.parseCSSColorObject(target) || $tw.utils.parseCSSColorObject(fallbackTarget);
 	if(!rgbTarget) {
 		return colourA;
 	}
-	var rgbColourA = $tw.utils.parseCSSColor(colourA),
-		rgbColourB = $tw.utils.parseCSSColor(colourB);
+	var rgbColourA = $tw.utils.parseCSSColorObject(colourA),
+		rgbColourB = $tw.utils.parseCSSColorObject(colourB);
 	if(rgbColourA && !rgbColourB) {
-		return rgbColourA;
+		return colourA;
 	}
 	if(rgbColourB && !rgbColourA) {
-		return rgbColourB;
+		return colourB;
 	}
 	if(!rgbColourA && !rgbColourB) {
 		// If neither colour is readable, return a crude inverse of the target
-		return [255 - rgbTarget[0],255 - rgbTarget[1],255 - rgbTarget[2],rgbTarget[3]];
+		rgbTarget.srgb.r = 1 - rgbTarget.srgb.r;
+		rgbTarget.srgb.g = 1 - rgbTarget.srgb.g;
+		rgbTarget.srgb.b = 1 - rgbTarget.srgb.b;
+		return rgbTarget.display();
 	}
-	// Colour brightness formula derived from http://www.w3.org/WAI/ER/WD-AERT/#color-contrast
-	var brightnessTarget = rgbTarget[0] * 0.299 + rgbTarget[1] * 0.587 + rgbTarget[2] * 0.114,
-		brightnessA = rgbColourA[0] * 0.299 + rgbColourA[1] * 0.587 + rgbColourA[2] * 0.114,
-		brightnessB = rgbColourB[0] * 0.299 + rgbColourB[1] * 0.587 + rgbColourB[2] * 0.114;
-	return Math.abs(brightnessTarget - brightnessA) > Math.abs(brightnessTarget - brightnessB) ? colourA : colourB;
+	var aContrast = rgbColourA.contrast(rgbTarget,"DeltaPhi"),
+		bContrast = rgbColourB.contrast(rgbTarget,"DeltaPhi");
+	return aContrast > bContrast ? colourA : colourB;
 };
@@ -0,0 +1,62 @@
+/*\
+title: $:/core/modules/utils/color-utils.js
+type: application/javascript
+module-type: utils
+
+Color.js related utilities
+
+\*/
+
+"use strict";
+
+var Color = require("$:/core/modules/utils/dom/color.js").Color;
+
+/*
+For backwards compatibility
+*/
+exports.parseCSSColor = function(colourString) {
+	var c = exports.parseCSSColorObject(colourString);
+	if(c) {
+		var rgb = c.srgb;
+		// Return components in the 0-255 range, matching the legacy csscolorparser.
+		// Clamp because Color.js can emit out-of-gamut sRGB components (e.g. from P3 inputs).
+		return [
+			Math.round(Math.max(0,Math.min(255,rgb[0] * 255))),
+			Math.round(Math.max(0,Math.min(255,rgb[1] * 255))),
+			Math.round(Math.max(0,Math.min(255,rgb[2] * 255))),
+			c.alpha
+		];
+	} else {
+		return null;
+	}
+};
+
+
+/*
+Preferred way to parse a Color.js colour
+*/
+exports.parseCSSColorObject = function(colourString) {
+	var c = null;
+	try {
+		c = new Color(colourString);
+	} catch(e) {
+		// Return null if there is an error
+	}
+	return c;
+};
+
+/*
+Convert a CSS colour to an RGB string suitable for use with the <input type="color"> element
+*/
+exports.convertCSSColorToRGBString = function(colourString) {
+	// The <input type="color"> element only accepts six digit hex values, so we
+	// discard any alpha channel and fall back to black for unparseable input
+	var rgb = exports.parseCSSColor(colourString);
+	if(rgb) {
+		return "#" + rgb.slice(0,3).map(function(component) {
+			return ("0" + component.toString(16)).slice(-2);
+		}).join("");
+	} else {
+		return "#000000";
+	}
+};
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Lea Verou, Chris Lilley
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,21 @@
+{
+	"tiddlers": [
+		{
+			"file": "color.global.min.v0.6.1.js",
+			"fields": {
+				"type": "application/javascript",
+				"title": "$:/core/modules/utils/dom/color.js",
+				"module-type": "library"
+			},
+			"prefix": "",
+			"suffix": ";\nexports.Color = Color;"
+		},
+		{
+			"file": "LICENSE",
+			"fields": {
+				"type": "text/plain",
+				"title": "$:/core/modules/utils/dom/color.js/license"
+			}
+		}
+	]
+}
@@ -1,200 +0,0 @@
-// (c) Dean McNamee <dean@gmail.com>, 2012.
-//
-// https://github.com/deanm/css-color-parser-js
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to
-// deal in the Software without restriction, including without limitation the
-// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
-// sell copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
-// IN THE SOFTWARE.
-
-// http://www.w3.org/TR/css3-color/
-var kCSSColorTable = {
-  "transparent": [0,0,0,0], "aliceblue": [240,248,255,1],
-  "antiquewhite": [250,235,215,1], "aqua": [0,255,255,1],
-  "aquamarine": [127,255,212,1], "azure": [240,255,255,1],
-  "beige": [245,245,220,1], "bisque": [255,228,196,1],
-  "black": [0,0,0,1], "blanchedalmond": [255,235,205,1],
-  "blue": [0,0,255,1], "blueviolet": [138,43,226,1],
-  "brown": [165,42,42,1], "burlywood": [222,184,135,1],
-  "cadetblue": [95,158,160,1], "chartreuse": [127,255,0,1],
-  "chocolate": [210,105,30,1], "coral": [255,127,80,1],
-  "cornflowerblue": [100,149,237,1], "cornsilk": [255,248,220,1],
-  "crimson": [220,20,60,1], "cyan": [0,255,255,1],
-  "darkblue": [0,0,139,1], "darkcyan": [0,139,139,1],
-  "darkgoldenrod": [184,134,11,1], "darkgray": [169,169,169,1],
-  "darkgreen": [0,100,0,1], "darkgrey": [169,169,169,1],
-  "darkkhaki": [189,183,107,1], "darkmagenta": [139,0,139,1],
-  "darkolivegreen": [85,107,47,1], "darkorange": [255,140,0,1],
-  "darkorchid": [153,50,204,1], "darkred": [139,0,0,1],
-  "darksalmon": [233,150,122,1], "darkseagreen": [143,188,143,1],
-  "darkslateblue": [72,61,139,1], "darkslategray": [47,79,79,1],
-  "darkslategrey": [47,79,79,1], "darkturquoise": [0,206,209,1],
-  "darkviolet": [148,0,211,1], "deeppink": [255,20,147,1],
-  "deepskyblue": [0,191,255,1], "dimgray": [105,105,105,1],
-  "dimgrey": [105,105,105,1], "dodgerblue": [30,144,255,1],
-  "firebrick": [178,34,34,1], "floralwhite": [255,250,240,1],
-  "forestgreen": [34,139,34,1], "fuchsia": [255,0,255,1],
-  "gainsboro": [220,220,220,1], "ghostwhite": [248,248,255,1],
-  "gold": [255,215,0,1], "goldenrod": [218,165,32,1],
-  "gray": [128,128,128,1], "green": [0,128,0,1],
-  "greenyellow": [173,255,47,1], "grey": [128,128,128,1],
-  "honeydew": [240,255,240,1], "hotpink": [255,105,180,1],
-  "indianred": [205,92,92,1], "indigo": [75,0,130,1],
-  "ivory": [255,255,240,1], "khaki": [240,230,140,1],
-  "lavender": [230,230,250,1], "lavenderblush": [255,240,245,1],
-  "lawngreen": [124,252,0,1], "lemonchiffon": [255,250,205,1],
-  "lightblue": [173,216,230,1], "lightcoral": [240,128,128,1],
-  "lightcyan": [224,255,255,1], "lightgoldenrodyellow": [250,250,210,1],
-  "lightgray": [211,211,211,1], "lightgreen": [144,238,144,1],
-  "lightgrey": [211,211,211,1], "lightpink": [255,182,193,1],
-  "lightsalmon": [255,160,122,1], "lightseagreen": [32,178,170,1],
-  "lightskyblue": [135,206,250,1], "lightslategray": [119,136,153,1],
-  "lightslategrey": [119,136,153,1], "lightsteelblue": [176,196,222,1],
-  "lightyellow": [255,255,224,1], "lime": [0,255,0,1],
-  "limegreen": [50,205,50,1], "linen": [250,240,230,1],
-  "magenta": [255,0,255,1], "maroon": [128,0,0,1],
-  "mediumaquamarine": [102,205,170,1], "mediumblue": [0,0,205,1],
-  "mediumorchid": [186,85,211,1], "mediumpurple": [147,112,219,1],
-  "mediumseagreen": [60,179,113,1], "mediumslateblue": [123,104,238,1],
-  "mediumspringgreen": [0,250,154,1], "mediumturquoise": [72,209,204,1],
-  "mediumvioletred": [199,21,133,1], "midnightblue": [25,25,112,1],
-  "mintcream": [245,255,250,1], "mistyrose": [255,228,225,1],
-  "moccasin": [255,228,181,1], "navajowhite": [255,222,173,1],
-  "navy": [0,0,128,1], "oldlace": [253,245,230,1],
-  "olive": [128,128,0,1], "olivedrab": [107,142,35,1],
-  "orange": [255,165,0,1], "orangered": [255,69,0,1],
-  "orchid": [218,112,214,1], "palegoldenrod": [238,232,170,1],
-  "palegreen": [152,251,152,1], "paleturquoise": [175,238,238,1],
-  "palevioletred": [219,112,147,1], "papayawhip": [255,239,213,1],
-  "peachpuff": [255,218,185,1], "peru": [205,133,63,1],
-  "pink": [255,192,203,1], "plum": [221,160,221,1],
-  "powderblue": [176,224,230,1], "purple": [128,0,128,1],
-  "red": [255,0,0,1], "rosybrown": [188,143,143,1],
-  "royalblue": [65,105,225,1], "saddlebrown": [139,69,19,1],
-  "salmon": [250,128,114,1], "sandybrown": [244,164,96,1],
-  "seagreen": [46,139,87,1], "seashell": [255,245,238,1],
-  "sienna": [160,82,45,1], "silver": [192,192,192,1],
-  "skyblue": [135,206,235,1], "slateblue": [106,90,205,1],
-  "slategray": [112,128,144,1], "slategrey": [112,128,144,1],
-  "snow": [255,250,250,1], "springgreen": [0,255,127,1],
-  "steelblue": [70,130,180,1], "tan": [210,180,140,1],
-  "teal": [0,128,128,1], "thistle": [216,191,216,1],
-  "tomato": [255,99,71,1], "turquoise": [64,224,208,1],
-  "violet": [238,130,238,1], "wheat": [245,222,179,1],
-  "white": [255,255,255,1], "whitesmoke": [245,245,245,1],
-  "yellow": [255,255,0,1], "yellowgreen": [154,205,50,1]}
-
-function clamp_css_byte(i) {  // Clamp to integer 0 .. 255.
-  i = Math.round(i);  // Seems to be what Chrome does (vs truncation).
-  return i < 0 ? 0 : i > 255 ? 255 : i;
-}
-
-function clamp_css_float(f) {  // Clamp to float 0.0 .. 1.0.
-  return f < 0 ? 0 : f > 1 ? 1 : f;
-}
-
-function parse_css_int(str) {  // int or percentage.
-  if (str[str.length - 1] === '%')
-    return clamp_css_byte(parseFloat(str) / 100 * 255);
-  return clamp_css_byte(parseInt(str));
-}
-
-function parse_css_float(str) {  // float or percentage.
-  if (str[str.length - 1] === '%')
-    return clamp_css_float(parseFloat(str) / 100);
-  return clamp_css_float(parseFloat(str));
-}
-
-function css_hue_to_rgb(m1, m2, h) {
-  if (h < 0) h += 1;
-  else if (h > 1) h -= 1;
-
-  if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
-  if (h * 2 < 1) return m2;
-  if (h * 3 < 2) return m1 + (m2 - m1) * (2/3 - h) * 6;
-  return m1;
-}
-
-function parseCSSColor(css_str) {
-  // Remove all whitespace, not compliant, but should just be more accepting.
-  var str = css_str.replace(/ /g, '').toLowerCase();
-
-  // Color keywords (and transparent) lookup.
-  if (str in kCSSColorTable) return kCSSColorTable[str].slice();  // dup.
-
-  // #abc and #abc123 syntax.
-  if (str[0] === '#') {
-    if (str.length === 4) {
-      var iv = parseInt(str.substr(1), 16);  // TODO(deanm): Stricter parsing.
-      if (!(iv >= 0 && iv <= 0xfff)) return null;  // Covers NaN.
-      return [((iv & 0xf00) >> 4) | ((iv & 0xf00) >> 8),
-              (iv & 0xf0) | ((iv & 0xf0) >> 4),
-              (iv & 0xf) | ((iv & 0xf) << 4),
-              1];
-    } else if (str.length === 7) {
-      var iv = parseInt(str.substr(1), 16);  // TODO(deanm): Stricter parsing.
-      if (!(iv >= 0 && iv <= 0xffffff)) return null;  // Covers NaN.
-      return [(iv & 0xff0000) >> 16,
-              (iv & 0xff00) >> 8,
-              iv & 0xff,
-              1];
-    }
-
-    return null;
-  }
-
-  var op = str.indexOf('('), ep = str.indexOf(')');
-  if (op !== -1 && ep + 1 === str.length) {
-    var fname = str.substr(0, op);
-    var params = str.substr(op+1, ep-(op+1)).split(',');
-    var alpha = 1;  // To allow case fallthrough.
-    switch (fname) {
-      case 'rgba':
-        if (params.length !== 4) return null;
-        alpha = parse_css_float(params.pop());
-        // Fall through.
-      case 'rgb':
-        if (params.length !== 3) return null;
-        return [parse_css_int(params[0]),
-                parse_css_int(params[1]),
-                parse_css_int(params[2]),
-                alpha];
-      case 'hsla':
-        if (params.length !== 4) return null;
-        alpha = parse_css_float(params.pop());
-        // Fall through.
-      case 'hsl':
-        if (params.length !== 3) return null;
-        var h = (((parseFloat(params[0]) % 360) + 360) % 360) / 360;  // 0 .. 1
-        // NOTE(deanm): According to the CSS spec s/l should only be
-        // percentages, but we don't bother and let float or percentage.
-        var s = parse_css_float(params[1]);
-        var l = parse_css_float(params[2]);
-        var m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
-        var m1 = l * 2 - m2;
-        return [clamp_css_byte(css_hue_to_rgb(m1, m2, h+1/3) * 255),
-                clamp_css_byte(css_hue_to_rgb(m1, m2, h) * 255),
-                clamp_css_byte(css_hue_to_rgb(m1, m2, h-1/3) * 255),
-                alpha];
-      default:
-        return null;
-    }
-  }
-
-  return null;
-}
-
-try { exports.parseCSSColor = parseCSSColor } catch(e) { }
@@ -1,3 +0,0 @@
-title: $:/core/modules/utils/dom/csscolorparser.js
-type: application/javascript
-module-type: utils
@@ -62,8 +62,8 @@ SendMessageWidget.prototype.invokeAction = function(triggeringWidget,event) {
 	var paramObject = Object.create(null);
 	// Add names/values pairs if present
 	if(this.actionNames && this.actionValues) {
-		var names = this.wiki.filterTiddlers(this.actionNames,this),
-			values = this.wiki.filterTiddlers(this.actionValues,this);
+		var names = this.wiki.filterTiddlers(this.actionNames,this,null,{defaultFilterRunPrefix: "all"}),
+			values = this.wiki.filterTiddlers(this.actionValues,this,null,{defaultFilterRunPrefix: "all"});
 		$tw.utils.each(names,function(name,index) {
 			paramObject[name] = values[index] || "";
 		});
@@ -56,10 +56,10 @@ Invoke the action associated with this widget
 */
 SetMultipleFieldsWidget.prototype.invokeAction = function(triggeringWidget,event) {
 	var tiddler = this.wiki.getTiddler(this.actionTiddler),
-		names, values = this.wiki.filterTiddlers(this.actionValues,this);
+		names, values = this.wiki.filterTiddlers(this.actionValues,this,null,{defaultFilterRunPrefix: "all"});
 	if(this.actionFields) {
 		var additions = {};
-		names = this.wiki.filterTiddlers(this.actionFields,this);
+		names = this.wiki.filterTiddlers(this.actionFields,this,null,{defaultFilterRunPrefix: "all"});
 		$tw.utils.each(names,function(fieldname,index) {
 			additions[fieldname] = values[index] || "";
 		});
@@ -68,7 +68,7 @@ SetMultipleFieldsWidget.prototype.invokeAction = function(triggeringWidget,event
 		this.wiki.addTiddler(new $tw.Tiddler(creationFields,tiddler,{title: this.actionTiddler},modificationFields,additions));
 	} else if(this.actionIndexes) {
 		var data = this.wiki.getTiddlerData(this.actionTiddler,Object.create(null));
-		names = this.wiki.filterTiddlers(this.actionIndexes,this);
+		names = this.wiki.filterTiddlers(this.actionIndexes,this,null,{defaultFilterRunPrefix: "all"});
 		$tw.utils.each(names,function(name,index) {
 			data[name] = values[index] || "";
 		});
@@ -72,8 +72,8 @@ GenesisWidget.prototype.execute = function() {
 	this.attributeNames = [];
 	this.attributeValues = [];
 	if(this.genesisNames && this.genesisValues) {
-		this.attributeNames = this.wiki.filterTiddlers(self.genesisNames,this);
-		this.attributeValues = this.wiki.filterTiddlers(self.genesisValues,this);
+		this.attributeNames = this.wiki.filterTiddlers(self.genesisNames,this,null,{defaultFilterRunPrefix: "all"});
+		this.attributeValues = this.wiki.filterTiddlers(self.genesisValues,this,null,{defaultFilterRunPrefix: "all"});
 		$tw.utils.each(this.attributeNames,function(varname,index) {
 			$tw.utils.addAttributeToParseTreeNode(parseTreeNodes[0],varname,self.attributeValues[index] || "");
 		});
@@ -103,8 +103,8 @@ GenesisWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes(),
 		filterNames = this.getAttribute("$names",""),
 		filterValues = this.getAttribute("$values",""),
-		attributeNames = this.wiki.filterTiddlers(filterNames,this),
-		attributeValues = this.wiki.filterTiddlers(filterValues,this);
+		attributeNames = this.wiki.filterTiddlers(filterNames,this,null,{defaultFilterRunPrefix: "all"}),
+		attributeValues = this.wiki.filterTiddlers(filterValues,this,null,{defaultFilterRunPrefix: "all"});
 	if($tw.utils.count(changedAttributes) > 0 || !$tw.utils.isArrayEqual(this.attributeNames,attributeNames) || !$tw.utils.isArrayEqual(this.attributeValues,attributeValues)) {
 		this.refreshSelf();
 		return true;
@@ -49,8 +49,8 @@ SetMultipleVariablesWidget.prototype.setVariables = function() {
 	this.variableNames = [];
 	this.variableValues = [];
 	if(filterNames && filterValues) {
-		this.variableNames = this.wiki.filterTiddlers(filterNames,this);
-		this.variableValues = this.wiki.filterTiddlers(filterValues,this);
+		this.variableNames = this.wiki.filterTiddlers(filterNames,this,null,{defaultFilterRunPrefix: "all"});
+		this.variableValues = this.wiki.filterTiddlers(filterValues,this,null,{defaultFilterRunPrefix: "all"});
 		$tw.utils.each(this.variableNames,function(varname,index) {
 			self.setVariable(varname,self.variableValues[index]);
 		});
@@ -63,8 +63,8 @@ Refresh the widget by ensuring our attributes are up to date
 SetMultipleVariablesWidget.prototype.refresh = function(changedTiddlers) {
 	var filterNames = this.getAttribute("$names",""),
 		filterValues = this.getAttribute("$values",""),
-		variableNames = this.wiki.filterTiddlers(filterNames,this),
-		variableValues = this.wiki.filterTiddlers(filterValues,this);
+		variableNames = this.wiki.filterTiddlers(filterNames,this,null,{defaultFilterRunPrefix: "all"}),
+		variableValues = this.wiki.filterTiddlers(filterValues,this,null,{defaultFilterRunPrefix: "all"});
 	if(!$tw.utils.isArrayEqual(this.variableNames,variableNames) || !$tw.utils.isArrayEqual(this.variableValues,variableValues)) {
 		this.refreshSelf();
 		return true;
@@ -0,0 +1,10 @@
+title: $:/palettes/AutoToggle
+name: AutoToggle
+description: Automatically switch between dark and light modes
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: [{$:/info/browser/darkmode}!match[yes]then[light]else[dark]]
+customisations: $:/palettes/AutoToggle/Customisations
+palette-import@light: $:/palettes/TwentyTwenties
+palette-import@dark: $:/palettes/TwentyTwenties/Dark
+category: 2026
@@ -0,0 +1,25 @@
+title: $:/palettes/AutoToggle/Customisations
+
+\procedure layer-input-actions()
+<$action-setfield $tiddler=<<layerTitle>> palette-import={{$:/palette}}/>
+\end layer-input-actions
+
+\procedure set-imported-palette(field)
+<$select field=<<field>> default={{{ [[$:/temp/palette-consolidated]get<field>] }}} actions=<<layer-input-actions>>>
+	<$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]sort[name]] -[{$:/palette}]">
+		<option value=<<currentTiddler>>><$view field="name"><$view field="title"/></$view></option>
+	</$list>
+</$select>
+\end set-imported-palette
+
+This palette can be used to automatically switch between two palettes based on the browser's dark mode setting.
+
+<$let layerTitle={{{ [function[tf.palette-customisations-layer]] }}}>
+<$tiddler tiddler=<<layerTitle>>>
+
+Light palette: <<set-imported-palette field:"palette-import@light">>
+
+Dark palette: <<set-imported-palette field:"palette-import@dark">>
+
+</$tiddler>
+</$let>
@@ -0,0 +1,226 @@
+title: $:/palettes/TwentyTwenties
+name: TwentyTwenties
+description: Modern and flexible
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+customisations: $:/palettes/TwentyTwenties/Customisations
+palette-import: $:/palettes/Vanilla
+category: 2026
+
+# Background and foreground colours, which are interpolated as required
+base-paper: #FFFCF0
+base-background: #f0d5c6
+base-ink: #333344
+?base-paper-ink: [tf.check-colour-contrast[base-paper],[base-ink],[45]]
+?base-background-ink: [tf.check-colour-contrast[base-background],[base-ink],[45]]
+
+# Primary colour, used for links and other accented elements
+base-primary: #5778d8
+?base-paper-primary: [tf.check-colour-contrast[base-paper],[base-primary],[45]]
+?base-background-primary: [tf.check-colour-contrast[base-background],[base-primary],[45]]
+
+# Secondary colour, used for alerts and other secondary elements
+base-secondary: #f0e48a
+?base-ink-secondary: [tf.check-colour-contrast[base-ink],[base-secondary],[45]]
+
+# Tertiary base colour, used for monospaced text and other tertiary elements
+base-tertiary: rgb(183, 95, 95)
+?base-paper-tertiary: [tf.check-colour-contrast[base-paper],[base-tertiary],[45]]
+
+# Basic spectrum colours
+base-black: #100F0F
+base-red: #D14D41
+base-orange: #DA702C
+base-yellow: #D0A215
+base-green: #879A39
+base-cyan: #3AA99F
+base-blue: #4385BE
+base-purple: #8B7EC8
+base-magenta: #CE5D97
+base-white: #FFFCF0
+# Darker variants
+# base-red: #AF3029
+# base-orange: #BC5215
+# base-yellow: #AD8301
+# base-green: #66800B
+# base-cyan: #24837B
+# base-blue: #205EA6
+# base-purple: #5E409D
+# base-magenta: #A02F6F
+
+# Palette definitions
+alert-background: [tf.colour[base-secondary]]
+alert-border: [tf.interpolate-colours[base-ink],[alert-background],[0.6]]
+alert-highlight: [tf.interpolate-colours[base-ink],[base-primary],[0.3]]
+alert-muted-foreground: [tf.interpolate-colours[base-ink],[alert-background],[0.4]]
+background: [tf.colour[base-paper]]
+blockquote-bar: [tf.colour[muted-foreground]]
+button-background: 
+button-border: 
+button-foreground: 
+code-background: [tf.interpolate-colours[base-paper],[base-tertiary],[0.1]]
+code-border: [tf.interpolate-colours[base-paper],[base-tertiary],[0.6]]
+code-foreground: [tf.colour[base-tertiary]]
+diff-delete-background: [tf.colour[base-red]]
+diff-delete-foreground: [tf.colour[foreground]]
+diff-equal-background: 
+diff-equal-foreground: [tf.colour[foreground]]
+diff-insert-background: [tf.colour[base-green]]
+diff-insert-foreground: [tf.colour[foreground]]
+diff-invisible-background: 
+diff-invisible-foreground: [tf.colour[muted-foreground]]
+dirty-indicator: [tf.colour[base-tertiary]]
+download-background: [tf.interpolate-colours[base-paper],[base-green],[0.6]]
+download-foreground: [tf.interpolate-colours[base-ink],[base-green],[0.1]]
+dragger-background: [tf.colour[foreground]]
+dragger-foreground: [tf.colour[background]]
+dropdown-background: [tf.colour[background]]
+dropdown-border: [tf.colour[muted-foreground]]
+dropdown-tab-background-selected: [tf.colour[background]]
+dropdown-tab-background: [tf.interpolate-colours[base-paper],[base-ink],[0.9]]
+dropzone-background: [tf.colour[base-secondary]colour-set-alpha[0.7]]
+external-link-background-hover: inherit
+external-link-background-visited: inherit
+external-link-background: inherit
+external-link-foreground-hover: inherit
+external-link-foreground-visited: [tf.colour[primary]]
+external-link-foreground: [tf.colour[primary]]
+footnote-target-background: [tf.interpolate-colours[base-paper],[base-ink],[0.2]]
+foreground: [tf.colour[base-ink]]
+highlight-background: [tf.interpolate-colours[base-paper],[base-yellow],[0.5]]
+highlight-foreground: [tf.interpolate-colours[base-yellow],[base-ink],[0.8]]
+menubar-background: #5778d8
+menubar-foreground: #fff
+message-background: [tf.interpolate-colours[base-paper],[base-blue],[0.2]]
+message-border: [tf.interpolate-colours[base-blue],[base-ink],[0.5]]
+message-foreground: [tf.interpolate-colours[base-blue],[base-ink],[0.8]]
+modal-backdrop: [tf.colour[foreground]]
+modal-background: [tf.colour[background]]
+modal-border: #999999
+modal-footer-background: #f5f5f5
+modal-footer-border: #dddddd
+modal-header-border: #eeeeee
+muted-foreground: [tf.interpolate-colours[base-paper],[base-ink],[0.3]]
+network-activity-foreground: #448844
+notification-background: [tf.colour[base-tertiary]colour-set-oklch:l[0.9]]
+notification-border: [tf.colour[base-tertiary]colour-set-oklch:l[0.2]]
+page-background: [tf.colour[base-background]]
+pre-background: [tf.interpolate-colours[base-paper],[base-tertiary],[0.1]]
+pre-border: [tf.interpolate-colours[base-paper],[base-tertiary],[0.6]]
+primary: [tf.colour[base-primary]]
+select-tag-background: 
+select-tag-foreground: 
+selection-background: 
+selection-foreground: 
+sidebar-button-foreground: [tf.colour[sidebar-controls-foreground]]
+sidebar-controls-foreground-hover: [tf.interpolate-colours[base-ink],[base-background],[0.2]]
+sidebar-controls-foreground: [tf.interpolate-colours[base-ink],[base-background],[0.8]]
+sidebar-foreground-shadow: inherit
+sidebar-foreground: =[tf.colour[base-ink]] =[tf.colour[base-paper]] =[tf.colour[base-background]] +[colour-best-contrast[]]
+sidebar-muted-foreground-hover: [tf.colour[sidebar-muted-foreground]colour-set-oklch:l[0.3]]
+sidebar-muted-foreground: [tf.interpolate-colours[foreground],[page-background],[0.6]]
+sidebar-tab-background-selected: [tf.colour[tab-background-selected]]
+sidebar-tab-background: [tf.colour[tab-background]]
+sidebar-tab-border-selected: [tf.colour[tab-border-selected]]
+sidebar-tab-border: [tf.colour[tab-border]]
+sidebar-tab-divider: [tf.colour[tab-divider]]
+sidebar-tab-foreground-selected: [tf.colour[tab-foreground-selected]]
+sidebar-tab-foreground: [tf.colour[tab-foreground]]
+sidebar-tiddler-link-foreground-hover: [tf.colour[sidebar-tiddler-link-foreground]colour-set-oklch:l[0.5]]
+sidebar-tiddler-link-foreground: =[tf.colour[base-primary]] =[tf.colour[base-secondary]] =[tf.colour[base-tertiary]] =[tf.colour[base-background]] +[colour-best-contrast[]]
+site-title-foreground: [tf.colour[tiddler-title-foreground]]
+stability-deprecated: #ff0000
+stability-experimental: #c07c00
+stability-legacy: #0000ff
+stability-stable: #008000
+static-alert-foreground: #aaaaaa
+tab-background-selected: [tf.colour[background]]
+tab-background: [tf.interpolate-colours[base-paper],[base-ink],[0.2]]
+tab-border-selected: [tf.colour[muted-foreground]]
+tab-border: [tf.colour[muted-foreground]]
+tab-divider: [tf.colour[muted-foreground]]
+tab-foreground-selected: [tf.colour[tab-foreground]]
+tab-foreground: [tf.colour[foreground]]
+table-border: [tf.colour[foreground]]
+table-footer-background: [tf.interpolate-colours[background],[foreground],[0.2]]
+table-header-background: [tf.interpolate-colours[background],[foreground],[0.1]]
+tag-background: [tf.interpolate-colours[base-paper],[base-yellow],[0.9]]
+tag-foreground: [tf.interpolate-colours[base-yellow],[base-ink],[0.8]]
+testcase-accent-level-1: #c1eaff
+testcase-accent-level-2: #E3B740
+testcase-accent-level-3: #5FD564
+tiddler-background: [tf.colour[background]]
+tiddler-border: [tf.interpolate-colours[base-paper],[base-background],[0.5]]
+tiddler-controls-foreground-hover: [tf.interpolate-colours[background],[foreground],[0.7]]
+tiddler-controls-foreground-selected: [tf.interpolate-colours[background],[foreground],[0.9]]
+tiddler-controls-foreground: [tf.interpolate-colours[background],[foreground],[0.5]]
+tiddler-editor-background: #f8f8f8
+tiddler-editor-border-image: #ffffff
+tiddler-editor-border: #cccccc
+tiddler-editor-fields-even: #e0e8e0
+tiddler-editor-fields-odd: #f0f4f0
+tiddler-info-background: #f8f8f8
+tiddler-info-border: #dddddd
+tiddler-info-tab-background: #f8f8f8
+tiddler-link-background: [tf.colour[background]]
+tiddler-link-foreground: [tf.colour[primary]]
+tiddler-subtitle-foreground: [tf.interpolate-colours[background],[foreground],[0.6]]
+tiddler-title-foreground: [tf.interpolate-colours[background],[foreground],[0.9]]
+toolbar-cancel-button: 
+toolbar-close-button: 
+toolbar-delete-button: 
+toolbar-done-button: 
+toolbar-edit-button: 
+toolbar-info-button: 
+toolbar-new-button: 
+toolbar-options-button: 
+toolbar-save-button: 
+tour-chooser-button-foreground: <<colour very-muted-foreground>>
+tour-chooser-button-hover-background: <<colour muted-foreground>>
+tour-chooser-button-hover-foreground: <<colour background>>
+tour-chooser-button-selected-background: <<colour primary>>
+tour-chooser-button-selected-foreground: <<colour background>>
+tour-chooser-dropdown-foreground: <<colour very-muted-foreground>>
+tour-chooser-item-background: <<colour background>>
+tour-chooser-item-border: <<colour muted-foreground>>
+tour-chooser-item-foreground: <<colour foreground>>
+tour-chooser-item-shadow: <<colour muted-foreground>>
+tour-chooser-item-start-background: <<colour download-background>>
+tour-chooser-item-start-foreground: <<colour background>>
+tour-chooser-item-start-hover-background: <<colour primary>>
+tour-chooser-item-start-hover-foreground: <<colour background>>
+tour-fullscreen-background: <<colour page-background>>
+tour-fullscreen-controls-foreground: <<colour muted-foreground>>
+tour-navigation-buttons-back-background: red
+tour-navigation-buttons-back-foreground: white
+tour-navigation-buttons-hint-background: purple
+tour-navigation-buttons-hint-foreground: white
+tour-navigation-buttons-hover-background: <<colour foreground>>
+tour-navigation-buttons-hover-foreground: <<colour background>>
+tour-navigation-buttons-next-background: purple
+tour-navigation-buttons-next-foreground: white
+tour-overlay-background: #cbfff8
+tour-overlay-border: #228877
+tour-step-heading-background: none
+tour-step-task-background: <<colour download-background>>
+tour-step-task-foreground: <<colour download-foreground>>
+untagged-background: #999999
+very-muted-foreground: #888888
+wikilist-background: #e5e5e5
+wikilist-button-background: #acacac
+wikilist-button-foreground: #000000
+wikilist-button-open-hover: green
+wikilist-button-open: #4fb82b
+wikilist-button-remove-hover: red
+wikilist-button-remove: #d85778
+wikilist-button-reveal-hover: blue
+wikilist-button-reveal: #5778d8
+wikilist-droplink-dragover: [tf.colour[base-secondary]colour-set-alpha[0.7]]
+wikilist-info: #000000
+wikilist-item: #ffffff
+wikilist-title-svg: [tf.colour[wikilist-title]]
+wikilist-title: #666666
+wikilist-toolbar-background: #d3d3d3
+wikilist-toolbar-foreground: #888888
+wikilist-url: #aaaaaa
@@ -0,0 +1,25 @@
+title: $:/palettes/TwentyTwenties/Customisations
+
+\procedure layer-input-actions()
+<$action-setfield $tiddler=<<layerTitle>> palette-import={{$:/palette}}/>
+\end layer-input-actions
+
+\procedure entry(name,description)
+<$text text=<<description>>/>: <$edit-text tiddler=<<layerTitle>> index=<<name>> type="color" tag="input" default={{{ [function[colour],<name>] }}} inputActions=<<layer-input-actions>>/>
+\end entry
+
+<$let layerTitle={{{ [function[tf.palette-customisations-layer]] }}}>
+
+<<entry name:"base-paper" description:"Paper">>
+
+<<entry name:"base-background" description:"Page background">>
+
+<<entry name:"base-ink" description:"Ink">>
+
+<<entry name:"base-primary" description:"Primary">>
+
+<<entry name:"base-secondary" description:"Secondary">>
+
+<<entry name:"base-tertiary" description:"Tertiary">>
+
+</$let>
@@ -0,0 +1,12 @@
+title: $:/palettes/TwentyTwenties/Dark
+name: TwentyTwenties Dark
+description: Modern and flexible, Darkish
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: dark
+palette-import: $:/palettes/TwentyTwenties
+category: 2026
+
+base-paper: #111122
+base-background: #f5f0f9
+base-ink: #8C8F80
@@ -0,0 +1,12 @@
+title: $:/palettes/TwentyTwenties/Green
+name: TwentyTwenties (Green)
+description: Modern and flexible, Greenish
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+palette-import: $:/palettes/TwentyTwenties
+category: 2026
+
+base-paper: rgb(188, 255, 161)
+base-background: rgb(94, 192, 145)
+base-primary: #6e803c
@@ -0,0 +1,13 @@
+title: $:/palettes/TwentyTwenties/GreenP3
+name: TwentyTwenties (Green P3)
+description: Modern and flexible, Greenish and super bright
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+palette-import: $:/palettes/TwentyTwenties
+category: 2026
+
+base-paper: color(display-p3 0.281 1 0.584 / 1)
+base-background: color(display-p3 1 1 0 / 1)
+base-primary: color(display-p3 1 0.563 1 / 1)
+
@@ -4,6 +4,7 @@ description: Pale and unobtrusive
 tags: $:/tags/Palette
 type: application/x-tiddler-dictionary
 color-scheme: light
+category: Legacy

 alert-background: #ffe476
 alert-border: #b99e2f
@@ -0,0 +1,12 @@
+title: $:/palettes/VanillaCherry
+name: Vanilla Cherry
+category: 2026
+description: Pale and unobtrusive with a cherry on top
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+palette-import: $:/palettes/Vanilla
+
+primary: rgb(224, 32, 86)
+menubar-foreground: #fff
+menubar-background: <<colour primary>>
@@ -0,0 +1,7 @@
+title: $:/palettes/background/contrast-tests
+type: application/x-tiddler-dictionary
+tags: $:/tags/BackgroundPalette
+
+?background-foreground-contrast: [tf.check-colour-contrast[background],[foreground],[45]]
+?alert-contrast: [tf.check-colour-contrast[alert-background],[foreground],[45]]
+?code-contrast: [tf.check-colour-contrast[code-background],[code-foreground],[45]]
@@ -5,7 +5,7 @@ title: $:/core/stylesheets/custom-properties
 /* Tiddlywiki's CSS properties */

 :root {
-	<$list filter="[[$:/palettes/Vanilla]indexes[]]">
+	<$list filter="[[$:/temp/palette-colours]indexes[]!prefix[?]]">
 	--tpc-<<currentTiddler>>: <$transclude $variable="colour" $mode="inline" name=<<currentTiddler>>/>;
 	</$list>

@@ -6,5 +6,5 @@ caption: {{$:/language/ControlPanel/Appearance/Caption}}
 {{$:/language/ControlPanel/Appearance/Hint}}

 <div class="tc-control-panel">
-<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/ControlPanel/Appearance]!has[draft.of]]" default="$:/core/ui/ControlPanel/Theme" explicitState="$:/state/tab--1963855381"/>
+<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/ControlPanel/Appearance]!has[draft.of]]" default="$:/core/ui/ControlPanel/Palette" explicitState="$:/state/tab--1963855381"/>
 </div>
@@ -2,20 +2,4 @@ title: $:/core/ui/ControlPanel/Palette
 tags: $:/tags/ControlPanel/Appearance
 caption: {{$:/language/ControlPanel/Palette/Caption}}

-\define lingo-base() $:/language/ControlPanel/Palette/
-
-{{$:/snippets/paletteswitcher}}
-
-<$reveal type="nomatch" state="$:/state/ShowPaletteEditor" text="yes">
-
-<$button set="$:/state/ShowPaletteEditor" setTo="yes"><<lingo ShowEditor/Caption>></$button>
-
-</$reveal>
-
-<$reveal type="match" state="$:/state/ShowPaletteEditor" text="yes">
-
-<$button set="$:/state/ShowPaletteEditor" setTo="no"><<lingo HideEditor/Caption>></$button>
-{{$:/PaletteManager}}
-
-</$reveal>
-
+{{$:/PaletteManager}}
@@ -41,7 +41,7 @@ tags: $:/tags/EditTemplate
 	<$list filter="[<currentTiddler>get<tagField>enlist-input[]sort[title]]" storyview="pop">
 		<$macrocall $name="tag-body"
 			colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
-			palette={{$:/palette}}
+			palette="$:/temp/palette-colours"
 			icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}}
 			tagField=<<tagField>>
 		/>
@@ -0,0 +1,105 @@
+title: $:/PaletteEditor
+
+\define lingo-base() $:/language/ControlPanel/Palette/Editor/
+\define describePaletteColour(colour)
+<$transclude tiddler="$:/language/Docs/PaletteColours/$colour$"><$text text="$colour$"/></$transclude>
+\end
+\define edit-colour-placeholder()
+ edit $(colourName)$
+\end
+\define colour-tooltip(showhide) $showhide$ editor for $(newColourName)$ 
+
+\define resolve-colour(macrocall)
+\import $:/core/macros/utils
+\whitespace trim
+<$wikify name="name" text="""$macrocall$""">
+<<name>>
+</$wikify>
+\end
+
+\define delete-colour-index-actions() <$action-setfield $index=<<colourName>>/>
+\define palette-manager-colour-row-segment()
+\whitespace trim
+<$edit-text index=<<colourName>> tag="input" placeholder=<<edit-colour-placeholder>> default=""/>
+<br>
+<$edit-text index=<<colourName>> type="color" tag="input" class="tc-palette-manager-colour-input"/>
+<$list filter="[<currentTiddler>getindex<colourName>removeprefix[<<]removesuffix[>>]] [<currentTiddler>getindex<colourName>removeprefix[<$]removesuffix[/>]]" variable="ignore">
+<$set name="state" value={{{ [[$:/state/palettemanager/]addsuffix<currentTiddler>addsuffix[/]addsuffix<colourName>] }}}>
+<$wikify name="newColourName" text="""<$macrocall $name="resolve-colour" macrocall={{{ [<currentTiddler>getindex<colourName>] }}}/>""">
+<$reveal state=<<state>> type="nomatch" text="show">
+<$button tooltip=<<colour-tooltip show>> aria-label=<<colour-tooltip show>> class="tc-btn-invisible" set=<<state>> setTo="show">{{$:/core/images/down-arrow}}<$text text=<<newColourName>> class="tc-small-gap-left"/></$button><br>
+</$reveal>
+<$reveal state=<<state>> type="match" text="show">
+<$button tooltip=<<colour-tooltip hide>> aria-label=<<colour-tooltip show>> class="tc-btn-invisible" actions="""<$action-deletetiddler $tiddler=<<state>>/>""">{{$:/core/images/up-arrow}}<$text text=<<newColourName>> class="tc-small-gap-left"/></$button><br>
+</$reveal>
+<$reveal state=<<state>> type="match" text="show">
+<$set name="colourName" value=<<newColourName>>>
+<br>
+<<palette-manager-colour-row-segment>>
+<br><br>
+</$set>
+</$reveal>
+</$wikify>
+</$set>
+</$list>
+\end
+
+\define palette-manager-colour-row()
+\whitespace trim
+<tr>
+<td>
+<span style="float:right;">
+<$button tooltip={{$:/language/ControlPanel/Palette/Editor/Delete/Hint}} aria-label={{$:/language/ControlPanel/Palette/Editor/Delete/Hint}} class="tc-btn-invisible" actions=<<delete-colour-index-actions>>>
+{{$:/core/images/delete-button}}</$button>
+</span>
+''<$macrocall $name="describePaletteColour" colour=<<colourName>>/>''<br/>
+<$macrocall $name="colourName" $output="text/plain"/>
+<%if [<layerTitle>getindex<colourName>] %>
+<br/><em><<lingo Customised/Entry>></em>
+<%endif%>
+</td>
+<td>
+<<palette-manager-colour-row-segment>>
+</td>
+</tr>
+\end
+
+\define palette-manager-table()
+\whitespace trim
+<table>
+<tbody>
+<$set name="colorList" filter="[{$:/state/palettemanager/showexternal}match[yes]]"
+   value="[all[shadows+tiddlers]tag[$:/tags/Palette]indexes[]]" emptyValue="[<currentTiddler>indexes[]]">
+<$list filter=<<colorList>> variable="colourName"> <<palette-manager-colour-row>> </$list>
+</$set>
+</tbody>
+</table>
+\end
+\whitespace trim
+<$set name="currentTiddler" value={{$:/palette}}>
+<$let layerTitle={{{ [function[tf.palette-customisations-layer]] }}}>
+
+<<lingo Prompt>>&#32;<$link to={{$:/palette}}><$macrocall $name="currentTiddler" $output="text/plain"/></$link>
+
+<$list filter="[function[tf.palette-customisations-layer]is[tiddler]]" variable="listItem">
+<<lingo Customised/Prompt>>
+&#32;
+<$button actions="""<$action-deletetiddler $tiddler=<<layerTitle>>/>""">{{$:/language/ControlPanel/Palette/Customisations/Reset/Caption}}</$button>
+</$list>
+
+<$list filter="[all[current]is[shadow]is[tiddler]]" variable="listItem">
+<<lingo Prompt/Modified>>
+&#32;
+<$button message="tm-delete-tiddler" param={{$:/palette}}><<lingo Reset/Caption>></$button>
+</$list>
+
+<$list filter="[all[current]is[shadow]!is[tiddler]]" variable="listItem">
+<<lingo Clone/Prompt>>
+</$list>
+
+<$button message="tm-new-tiddler" param={{$:/palette}}><<lingo Clone/Caption>></$button>
+
+<$checkbox tiddler="$:/state/palettemanager/showexternal" field="text" checked="yes" unchecked="no"><span class="tc-small-gap-left"><<lingo Names/External/Show>></span></$checkbox>
+
+<<palette-manager-table>>
+</$let>
@@ -1,94 +1,50 @@
 title: $:/PaletteManager

-\define lingo-base() $:/language/ControlPanel/Palette/Editor/
-\define describePaletteColour(colour)
-<$transclude tiddler="$:/language/Docs/PaletteColours/$colour$"><$text text="$colour$"/></$transclude>
-\end
-\define edit-colour-placeholder()
- edit $(colourName)$
-\end
-\define colour-tooltip(showhide) $showhide$ editor for $(newColourName)$ 
+\define lingo-base() $:/language/ControlPanel/Palette/

-\define resolve-colour(macrocall)
-\import $:/core/macros/utils
-\whitespace trim
-<$wikify name="name" text="""$macrocall$""">
-<<name>>
-</$wikify>
-\end
+<!-- Used by the language string Customisations/Prompt -->
+\procedure palette-link()
+<$tiddler tiddler={{$:/palette}}>
+	<$link to={{!!title}}>
+		<$view field="name" format="text">
+			<$view field="title" format="text"/>
+		</$view>
+	</$link>
+</$tiddler>
+\end palette-link
+
+<$transclude $tiddler="$:/snippets/paletteswitcher" thumbnails="yes"/>
+
+{{$:/snippets/palettetests}}
+
+<$let
+	resolvedPalette={{{ [{$:/palette}is[tiddler]] [{$:/palette}is[shadow]] :else[[$:/palettes/Vanilla]] }}}
+	paletteCustomisations={{{ [<resolvedPalette>get[customisations]] :else[[$:/temp/palette-consolidated]get[customisations]] }}}
+	layerTitle={{{ [function[tf.palette-customisations-layer]] }}}
+>
+	<%if [<paletteCustomisations>!match[]] %>
+		<div>
+			<<lingo Customisations/Prompt>>
+			<$transclude $tiddler=<<paletteCustomisations>> $mode="block"/>
+		</div>
+	<%endif%>
+	<%if [<layerTitle>is[tiddler]] %>
+		<div>
+			<$button actions="""<$action-deletetiddler $tiddler=<<layerTitle>>/>"""><<lingo Customisations/Reset/Caption>></$button>
+		</div>
+	<%endif%>
+</$let>
+
+<$reveal type="nomatch" state="$:/state/ShowPaletteEditor" text="yes">
+
+<$button set="$:/state/ShowPaletteEditor" setTo="yes"><<lingo ShowEditor/Caption>></$button>

-\define delete-colour-index-actions() <$action-setfield $index=<<colourName>>/>
-\define palette-manager-colour-row-segment()
-\whitespace trim
-<$edit-text index=<<colourName>> tag="input" placeholder=<<edit-colour-placeholder>> default=""/>
-<br>
-<$edit-text index=<<colourName>> type="color" tag="input" class="tc-palette-manager-colour-input"/>
-<$list filter="[<currentTiddler>getindex<colourName>removeprefix[<<]removesuffix[>>]] [<currentTiddler>getindex<colourName>removeprefix[<$]removesuffix[/>]]" variable="ignore">
-<$set name="state" value={{{ [[$:/state/palettemanager/]addsuffix<currentTiddler>addsuffix[/]addsuffix<colourName>] }}}>
-<$wikify name="newColourName" text="""<$macrocall $name="resolve-colour" macrocall={{{ [<currentTiddler>getindex<colourName>] }}}/>""">
-<$reveal state=<<state>> type="nomatch" text="show">
-<$button tooltip=<<colour-tooltip show>> aria-label=<<colour-tooltip show>> class="tc-btn-invisible" set=<<state>> setTo="show">{{$:/core/images/down-arrow}}<$text text=<<newColourName>> class="tc-small-gap-left"/></$button><br>
 </$reveal>
-<$reveal state=<<state>> type="match" text="show">
-<$button tooltip=<<colour-tooltip hide>> aria-label=<<colour-tooltip show>> class="tc-btn-invisible" actions="""<$action-deletetiddler $tiddler=<<state>>/>""">{{$:/core/images/up-arrow}}<$text text=<<newColourName>> class="tc-small-gap-left"/></$button><br>
+
+<$reveal type="match" state="$:/state/ShowPaletteEditor" text="yes">
+
+<$button set="$:/state/ShowPaletteEditor" setTo="no"><<lingo HideEditor/Caption>></$button>
+{{$:/PaletteEditor}}
+
 </$reveal>
-<$reveal state=<<state>> type="match" text="show">
-<$set name="colourName" value=<<newColourName>>>
-<br>
-<<palette-manager-colour-row-segment>>
-<br><br>
-</$set>
-</$reveal>
-</$wikify>
-</$set>
-</$list>
-\end

-\define palette-manager-colour-row()
-\whitespace trim
-<tr>
-<td>
-<span style="float:right;">
-<$button tooltip={{$:/language/ControlPanel/Palette/Editor/Delete/Hint}} aria-label={{$:/language/ControlPanel/Palette/Editor/Delete/Hint}} class="tc-btn-invisible" actions=<<delete-colour-index-actions>>>
-{{$:/core/images/delete-button}}</$button>
-</span>
-''<$macrocall $name="describePaletteColour" colour=<<colourName>>/>''<br/>
-<$macrocall $name="colourName" $output="text/plain"/>
-</td>
-<td>
-<<palette-manager-colour-row-segment>>
-</td>
-</tr>
-\end
-
-\define palette-manager-table()
-\whitespace trim
-<table>
-<tbody>
-<$set name="colorList" filter="[{$:/state/palettemanager/showexternal}match[yes]]"
-   value="[all[shadows+tiddlers]tag[$:/tags/Palette]indexes[]]" emptyValue="[<currentTiddler>indexes[]]">
-<$list filter=<<colorList>> variable="colourName"> <<palette-manager-colour-row>> </$list>
-</$set>
-</tbody>
-</table>
-\end
-\whitespace trim
-<$set name="currentTiddler" value={{$:/palette}}>
-
-<<lingo Prompt>>&#32;<$link to={{$:/palette}}><$macrocall $name="currentTiddler" $output="text/plain"/></$link>
-
-<$list filter="[all[current]is[shadow]is[tiddler]]" variable="listItem">
-<<lingo Prompt/Modified>>
-&#32;
-<$button message="tm-delete-tiddler" param={{$:/palette}}><<lingo Reset/Caption>></$button>
-</$list>
-
-<$list filter="[all[current]is[shadow]!is[tiddler]]" variable="listItem">
-<<lingo Clone/Prompt>>
-</$list>
-
-<$button message="tm-new-tiddler" param={{$:/palette}}><<lingo Clone/Caption>></$button>
-
-<$checkbox tiddler="$:/state/palettemanager/showexternal" field="text" checked="yes" unchecked="no"><span class="tc-small-gap-left"><<lingo Names/External/Show>></span></$checkbox>
-
-<<palette-manager-table>>
@@ -0,0 +1,19 @@
+title: $:/core/ui/Palettes/Preview/Alert
+tags: $:/tags/Preview/Page
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-alert" style.background-color=<<colour alert-background>>>
+	<div class="tc-palette-preview-thumbnail-alert-border" style.border-color=<<colour alert-border>>>
+		<div style.color=<<colour foreground>>>
+			<div class="tc-palette-preview-thumbnail-alert-subtitle" style.color=<<colour alert-muted-foreground>>>
+				Lorem Ipsum
+				<div class="tc-palette-preview-thumbnail-alert-highlight" style.color=<<colour alert-highlight>>>
+					(Count: 1)
+				</div>
+			</div>
+			<div class="tc-palette-preview-thumbnail-alert-body">
+				Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Sed Do Eiusmod Tempor Incididunt.
+			</div>
+		</div>
+	</div>
+</div>
@@ -0,0 +1,55 @@
+title: $:/core/ui/Palettes/Preview/Helpers
+tags: $:/tags/Preview/Helpers
+
+\whitespace trim
+
+\procedure palette-preview-component-list(tag)
+<$list filter="[all[shadows+tiddlers]tag<tag>!has[draft.of]]" variable="componentTitle">
+	<$transclude $tiddler=<<componentTitle>> title=<<title>>/>
+</$list>
+\end palette-preview-component-list
+
+\procedure tab-set(tabTitles,colourPrefix:"")
+	<div class="tc-palette-preview-thumbnail-tab-set">
+		<div class="tc-palette-preview-thumbnail-tab-buttons">
+			<$list filter="[enlist<tabTitles>]" variable="tabTitle" counter="tabIndex">
+				<%if [<tabIndex>match[1]] %>
+					<span
+						class="tc-palette-preview-thumbnail-tab-button"
+						style.border-color={{{ [<colourPrefix>addsuffix[tab-border-selected]] :map[function[colour],<currentTiddler>] }}}
+						style.color={{{ [<colourPrefix>addsuffix[tab-foreground-selected]] :map[function[colour],<currentTiddler>] }}}
+						style.background-color={{{ [<colourPrefix>addsuffix[tab-background-selected]] :map[function[colour],<currentTiddler>] }}}
+					>
+						<$text text=<<tabTitle>>/>
+					</span>
+				<%else%>
+					<span
+						class="tc-palette-preview-thumbnail-tab-button"
+						style.border-color={{{ [<colourPrefix>addsuffix[tab-border]] :map[function[colour],<currentTiddler>] }}}
+						style.color={{{ [<colourPrefix>addsuffix[tab-foreground]] :map[function[colour],<currentTiddler>] }}}
+						style.background-color={{{ [<colourPrefix>addsuffix[tab-background]] :map[function[colour],<currentTiddler>] }}}
+					>
+						<$text text=<<tabTitle>>/>
+					</span>
+				<%endif%>
+			</$list>
+		</div>
+		<div
+			class="tc-palette-preview-thumbnail-tab-divider"
+			style.border-color={{{ [<colourPrefix>addsuffix[tab-divider]] :map[function[colour],<currentTiddler>] }}}
+		>
+		</div>
+	</div>
+\end tab-set
+
+\procedure link(text)
+<span class="tc-palette-preview-thumbnail-tiddler-link" style.color=<<colour primary>>>
+	<$text text=<<text>>/>
+</span>
+\end link
+
+\procedure sidebar-link(text)
+<span class="tc-palette-preview-thumbnail-tiddler-link" style.color=<<colour sidebar-tiddler-link-foreground>>>
+	<$text text=<<text>>/>
+</span>
+\end sidebar-link
@@ -0,0 +1,11 @@
+title: $:/core/ui/Palettes/Preview/Notification
+tags: $:/tags/Preview/PageOptional
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-notification" style.background-color=<<colour notification-background>>>
+	<div class="tc-palette-preview-thumbnail-notification-border" style.border-color=<<colour notification-border>>>
+		<div class="tc-palette-preview-thumbnail-notification-body" style.color=<<colour foreground>>>
+			Lorem Ipsum Dolor Sit Amet Consectetur
+		</div>
+	</div>
+</div>
@@ -0,0 +1,8 @@
+title: $:/core/ui/Palettes/Preview/Sidebar/Search
+tags: $:/tags/Preview/SideBar
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-sidebar-search" style.background-color=<<colour background>>>
+	<div class="tc-palette-preview-thumbnail-sidebar-search-box">
+	</div>
+</div>
@@ -0,0 +1,7 @@
+title: $:/core/ui/Palettes/Preview/Sidebar/Subtitle
+tags: $:/tags/Preview/SideBar
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-sidebar-subtitle">
+	a non-linear personal web notebook
+</div>
@@ -0,0 +1,18 @@
+title: $:/core/ui/Palettes/Preview/Sidebar/Tabs
+tags: $:/tags/Preview/SideBar
+
+\whitespace trim
+
+\procedure recent-links()
+HelloThere Community Portal GettingStarted Development Download Filters Palettes Plugins Macros Templates Themes Stylesheets SystemTiddlers
+\end recent-links
+
+<<tab-set "Magna Placerat Ligula Imperdiet" "sidebar-">>
+
+<div class="tc-palette-preview-thumbnail-sidebar-list">
+	<$list filter="[enlist<recent-links>]">
+		<div>
+			<$transclude $variable="sidebar-link" text=<<currentTiddler>>/>
+		</div>
+	</$list>
+</div>
@@ -0,0 +1,7 @@
+title: $:/core/ui/Palettes/Preview/Sidebar/Title
+tags: $:/tags/Preview/SideBar
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-sidebar-title" style.color=<<colour site-title-foreground>>>
+	~TiddlyWiki
+</div>
@@ -0,0 +1,7 @@
+title: $:/core/ui/Palettes/Preview/SideBar
+tags: $:/tags/Preview/Page
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-sidebar" style.color=<<colour sidebar-foreground>>>
+	<<palette-preview-component-list "$:/tags/Preview/SideBar">>
+</div>
@@ -0,0 +1,9 @@
+title: $:/core/ui/Palettes/Preview/Story
+tags: $:/tags/Preview/Page
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-story">
+	<$list filter="HelloThere GettingStarted" variable="title">
+		<<palette-preview-component-list "$:/tags/Preview/Story">>
+	</$list>
+</div>
@@ -0,0 +1,10 @@
+title: $:/core/ui/Palettes/Preview/Tiddler
+tags: $:/tags/Preview/Story
+
+\parameters (title)
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-tiddler-border" style.border-color=<<colour tiddler-border>>>
+	<div class="tc-palette-preview-thumbnail-tiddler" style.background-color=<<colour tiddler-background>>>
+		<<palette-preview-component-list "$:/tags/Preview/Tiddler">>
+	</div>
+</div>
@@ -0,0 +1,15 @@
+title: $:/core/ui/Palettes/Preview/Tiddler/Body
+tags: $:/tags/Preview/Tiddler
+
+\whitespace trim
+
+<div class="tc-palette-preview-thumbnail-tiddler-body" style.color=<<colour foreground>>>
+	<%if [<title>match[HelloThere]] %>
+		Lorem ipsum dolor sit amet, <<link "consectetur adipiscing elit">>. Cras non arcu ultricies, egestas odio tempus, vestibulum ipsum. Praesent diam lorem, elementum in venenatis eget, tincidunt quis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam efficitur velit tortor, sit amet tristique felis viverra sit amet. <<link "Nullam posuere facilisis purus sed">> consectetur. Integer vel elit euismod, posuere ligula et, dictum tellus. Donec in odio diam. Sed metus magna, placerat at ligula et, imperdiet sagittis ex.
+	<%else%>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+		<<tab-set "Sed Metus Magna Placerat Ligula Imperdiet">>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non arcu ultricies, egestas odio tempus, vestibulum ipsum. Praesent diam lorem, elementum in venenatis eget, tincidunt quis lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+	<%endif%>
+</div>
+
@@ -0,0 +1,14 @@
+title: $:/core/ui/Palettes/Preview/Tiddler/Header
+tags: $:/tags/Preview/Tiddler
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-tiddler-header">
+	<div class="tc-palette-preview-thumbnail-tiddler-title" style.color=<<colour tiddler-title-foreground>>>
+		<$text text=<<title>>/>
+	</div>
+	<div class="tc-palette-preview-thumbnail-tiddler-toolbar" style.fill=<<colour tiddler-controls-foreground>>>
+		{{$:/core/images/down-arrow}}
+		{{$:/core/images/edit-button}}
+		{{$:/core/images/close-button}}
+	</div>
+</div>
@@ -0,0 +1,7 @@
+title: $:/core/ui/Palettes/Preview/Tiddler/Subtitle
+tags: $:/tags/Preview/Tiddler
+
+\whitespace trim
+<div class="tc-palette-preview-thumbnail-tiddler-subtitle" style.color=<<colour tiddler-subtitle-foreground>>>
+	Motovun Jack
+</div>
@@ -0,0 +1,11 @@
+title: $:/core/ui/Palettes/ViewTemplateBody
+
+<div style.width="220px">
+
+{{||$:/snippets/currpalettepreview}}
+
+</div>
+
+''<$view field="name" format="text"/>''
+<br>
+<$view field="description" format="text"/>
@@ -7,7 +7,6 @@ title: $:/core/ui/TagTemplate
 		tag=<<currentTiddler>>
 		icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}}
 		colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
-		palette={{$:/palette}}
 		element-tag="$button"
 		element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter="[subfilter{$:/core/config/TagPillDragFilter}]" tag='span'"""
 	/>
@@ -0,0 +1,7 @@
+title: $:/core/background-actions/AutoCompilePalette
+tags: $:/tags/BackgroundAction $:/tags/StartupAction
+platforms: browser
+track-filter: [{$:/palette}get[color-scheme]] :map[subfilter<currentTiddler>] [{$:/palette}changecount[]addprefix{$:/palette}] [[$:/palette]changecount[]] =[all[shadows+tiddlers]tag[$:/tags/Palette]changecount[]] =[all[shadows+tiddlers]tag[$:/tags/BackgroundPalette]changecount[]] =[all[tiddlers]prefix[$:/config/PaletteCustomisations/]changecount[]]
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<actions-recompile-current-palette>>
@@ -10,4 +10,5 @@ code-body: [field:code-body[yes]then[$:/core/ui/ViewTemplate/body/code]]
 import: [field:plugin-type[import]then[$:/core/ui/ViewTemplate/body/import]]
 plugin: [has[plugin-type]then[$:/core/ui/ViewTemplate/body/plugin]]
 hide-body: [field:hide-body[yes]then[$:/core/ui/ViewTemplate/body/blank]]
+palette: [tag[$:/tags/Palette]then[$:/core/ui/Palettes/ViewTemplateBody]]
 default: [[$:/core/ui/ViewTemplate/body/default]]
@@ -1,52 +1,12 @@
 title: $:/snippets/currpalettepreview

-\define resolve-colour(macrocall)
-\import $:/core/macros/utils
 \whitespace trim
-<$wikify name="name" text="""$macrocall$""">
-<<name>>
-</$wikify>
-\end
-\define swatchStyle()
-background-color: $(swatchColour)$;
-\end
-\define swatch-inner()
-\whitespace trim
-<$set name="swatchColour" value={{##$(colourResolved)$}}>
-<$list filter="[<swatchColour>!prefix[<<colour ]!suffix[>>]]" variable="ignore">
-<div class="tc-swatch" style=<<swatchStyle>> title=<<swatchTitle>>/>
-&#32;
-</$list>
-<$list filter="[<swatchColour>prefix[<<colour ]suffix[>>]]" variable="ignore">
-<$wikify name="colourResolved" text="<$macrocall $name='resolve-colour' macrocall=<<swatchColour>>/>">
-<<swatch-inner>>
-</$wikify>
-</$list>
-</$set>
-\end
-\define swatch()
-\whitespace trim
-<$set name="swatchColour" value={{##$(colour)$}}>
-<$set name="swatchTitle" value=<<colour>>>
-<$list filter="[<swatchColour>!prefix[<<colour ]!suffix[>>]]" variable="ignore">
-<div class="tc-swatch" style=<<swatchStyle>> title=<<swatchTitle>>/>
-&#32;
-</$list>
-<$list filter="[<swatchColour>prefix[<<colour ]suffix[>>]]" variable="ignore">
-<$wikify name="colourResolved" text="<$macrocall $name='resolve-colour' macrocall=<<swatchColour>>/>">
-<<swatch-inner>>
-</$wikify>
-</$list>
-</$set>
-</$set>
-\end
-\whitespace trim
-<div class="tc-swatches-horiz"><$list filter="
-foreground
-background
-muted-foreground
-primary
-page-background
-tab-background
-tiddler-info-background
-" variable="colour"><<swatch>></$list></div>
+
+\import [all[shadows+tiddlers]tag[$:/tags/Preview/Helpers]!is[draft]sort[title]]
+
+<!-- currentTiddler is the palette to use -->
+<$palette.preview paletteTitle=<<currentTiddler>>>
+	<div class="tc-palette-preview-thumbnail" style.background-color=<<colour page-background>>>
+		<<palette-preview-component-list tag:"$:/tags/Preview/Page">>
+	</div>
+</$palette.preview>
@@ -1,17 +1,174 @@
 title: $:/core/macros/CSS
 tags: $:/tags/Macro

-<!-- Needs to stay that way for backwards compatibility. See GH issue: #8326 -->
-\define colour(name)
-\whitespace trim
-<$transclude tiddler={{$:/palette}} index="$name$">
-	<$transclude tiddler="$:/palettes/Vanilla" index="$name$">
-		<$transclude tiddler="$:/config/DefaultColourMappings/$name$"/>
-	</$transclude>
-</$transclude>
-\end
+\procedure actions-compile-palette-filtered(consolidatedPalette,outputPalette)
+<!-- The $:/config/DefaultColourMappings/ fallback used below is unused by the core and is retained for compatibility with third party plugins -->
+<!-- Note the join, needed to cope with palette entries containing spaces -->
+\function tf.colour(name) [<consolidatedPalette>getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :map[tf.colour-inner-transform-classic-palette-entry<currentTiddler>] :map[subfilter:all<currentTiddler>join[ ]]
+\function colour(name) [tf.colour<name>]
+\function color(name) [tf.colour<name>]
+<!-- Make the colour function use the input palette -->
+<$list filter="[<consolidatedPalette>indexes[]sort[]]" variable="colour-name">
+	<$let filter-text={{{ [<consolidatedPalette>getindex<colour-name>] :else[[$:/config/DefaultColourMappings/]addsuffix<colour-name>get[text]] :map[tf.colour-inner-transform-classic-palette-entry<currentTiddler>] }}}>
+		<!-- Note the join, needed to cope with palette entries containing spaces -->
+		<$action-setfield $tiddler=<<outputPalette>> $index=<<colour-name>> $value={{{ [subfilter:all<filter-text>join[ ]] +[join[ ]] }}}/>
+	</$let>
+</$list>
+\end actions-compile-palette-filtered

-\define color(name) <<colour $name$>>
+\procedure actions-compile-palette-import(inputPalette,outputPalette,exclusions:"",scheme)
+<%if [enlist<exclusions>!match<inputPalette>count[]] :map[enlist<exclusions>count[]compare:number:eq<currentTiddler>] +[!match[]] %>
+		<$set name="exclusions" filter="[enlist<exclusions>] [<inputPalette>]">
+			<!-- Recursively import any imported palette -->
+			<$let
+				prefixed-palette-import={{{ [[palette-import@]addsuffix<scheme>] }}}
+				inputPalette={{{ [<inputPalette>get<prefixed-palette-import>has[title]] :else[<inputPalette>get[palette-import]] }}}
+			>
+				<%if [<inputPalette>has[title]] %>
+					<$transclude $variable="actions-compile-palette-import" inputPalette=<<inputPalette>> outputPalette=<<outputPalette>> exclusions=<<exclusions>> scheme=<<scheme>>/>
+				<%endif%>
+			</$let>
+			<!-- Copy the unsuffixed palette entries -->
+			<$action-setmultiplefields $tiddler=<<outputPalette>> $indexes="[<inputPalette>indexes[]!regexp[@]sort[]]" $values="[<inputPalette>indexes[]!regexp[@]sort[]] :map[<inputPalette>getindex<currentTiddler>]"/>
+			<!-- Copy the suffixed palette entries with the suffix stripped, overriding any unsuffixed entries of the same name -->
+			<%if [<scheme>!is[blank]] %>
+				<$let
+					prefixed-scheme={{{ [<scheme>addprefix[@]] }}}
+				>
+					<$action-setmultiplefields $tiddler=<<outputPalette>> $indexes="[<inputPalette>indexes[]suffix<prefixed-scheme>sort[]removesuffix<prefixed-scheme>]" $values="[<inputPalette>indexes[]suffix<prefixed-scheme>sort[]] :map[<inputPalette>getindex<currentTiddler>]"/>
+				</$let>
+			<%endif%>
+			<!-- Copy the fields from the palette -->
+			<$action-setmultiplefields $tiddler=<<outputPalette>> $fields="[<inputPalette>fields[]sort[]] -title -tags -text -type" $values="[<inputPalette>fields[]sort[]] -title -tags -text -type :map[<inputPalette>get<currentTiddler>]"/>
+		</$set>
+<%endif%>
+\end actions-compile-palette-import
+
+\procedure actions-compile-palette(inputPalette,outputPalette)
+\procedure tv-action-refresh-policy() always
+<$let
+	consolidatedPalette="$:/temp/palette-consolidated"
+>
+	<!-- Compute the current scheme -->
+	<$let
+		color-scheme-filter={{{ [<inputPalette>get[color-scheme]] :else[<inputPalette>get[palette-import]get[color-scheme]] :else[[light]] }}}
+		scheme={{{ [subfilter:all<color-scheme-filter>] }}}
+	>
+		<!-- Clear the consolidated palette that stores the result of flattening the chain of imported input palettes -->
+		<$action-deletetiddler $tiddler=<<consolidatedPalette>>/>
+		<$action-setfield $tiddler=<<consolidatedPalette>> type="application/x-tiddler-dictionary"/>
+		<!-- Clear the output palette that stores the plain CSS values of palette entries -->
+		<$action-deletetiddler $tiddler=<<outputPalette>>/>
+		<$action-setfield $tiddler=<<outputPalette>> type="application/x-tiddler-dictionary"/>
+		<!-- Import the background palettes -->
+		<$list filter="[all[shadows+tiddlers]tag[$:/tags/BackgroundPalette]sort[]]" variable="palette-name">
+			<$transclude $variable="actions-compile-palette-import" inputPalette=<<palette-name>> outputPalette=<<consolidatedPalette>> scheme=<<scheme>>/>
+		</$list>
+		<!-- Consolidate the chain of palettes -->
+		<$transclude $variable="actions-compile-palette-import" inputPalette=<<inputPalette>> outputPalette=<<consolidatedPalette>> scheme=<<scheme>>/>
+		<!-- Save the current scheme in the output tiddler -->
+		<$action-setfield $tiddler=<<outputPalette>> $field="color-scheme" $value=<<scheme>>/>
+		<!-- Compile the temporary palette to the output palette -->
+		<$transclude $variable="actions-compile-palette-filtered" consolidatedPalette=<<consolidatedPalette>> outputPalette=<<outputPalette>>/>
+		<!-- Blank any entries with recursive definitions, reporting them via the readability test mechanism -->
+		<$list filter="[<outputPalette>indexes[]!prefix[?]] :filter[<outputPalette>getindex<currentTiddler>regexp[Excessive filter recursion]]" variable="entry-name">
+			<$action-setfield $tiddler=<<outputPalette>> $index=<<entry-name>> $value=""/>
+			<$action-setfield $tiddler=<<outputPalette>> $index={{{ [<entry-name>addprefix[?recursion-]] }}} $value={{{ [[the definition of ']addsuffix<entry-name>addsuffix[' is recursive]] }}}/>
+		</$list>
+	</$let>
+</$let>
+\end actions-compile-palette
+
+<!-- Customisations of the current palette are stored in a layer tiddler that imports the palette itself -->
+\function tf.palette-customisations-layer()
+[{$:/palette}is[tiddler]] [{$:/palette}is[shadow]] :else[[$:/palettes/Vanilla]] :map[addprefix[$:/config/PaletteCustomisations/]]
+\end tf.palette-customisations-layer
+
+\procedure actions-recompile-current-palette()
+\procedure tv-action-refresh-policy() always
+<$let
+	resolvedPalette={{{ [{$:/palette}is[tiddler]] [{$:/palette}is[shadow]] :else[[$:/palettes/Vanilla]] }}}
+	inputPalette={{{ [function[tf.palette-customisations-layer]has[palette-import]] :else[<resolvedPalette>] }}}
+>
+	<$transclude $variable="actions-compile-palette" inputPalette=<<inputPalette>> outputPalette="$:/temp/palette-colours"/>
+</$let>
+\end actions-recompile-current-palette
+
+\procedure tv-palette-name() $:/temp/palette-colours
+
+\function tf.colour(name)
+[<tv-palette-name>getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]]
+\end tf.colour
+
+\function colour(name)
+[tf.colour<name>]
+\end colour
+
+\function color(name)
+[tf.colour<name>]
+\end color
+
+\procedure colour-function-prefix()
+[tf.colour[
+\end colour-function-prefix
+
+\procedure colour-function-suffix()
+]]
+\end colour-function-suffix
+
+\widget $palette.preview(paletteTitle)
+	\whitespace trim
+	<!-- The exclusions parameter guards against palettes that import each other in a loop -->
+	\function colour-inner-get-imported-palette(name,paletteTitle,exclusions)
+	[[palette-import@]addsuffix<scheme>] :map[<paletteTitle>get<currentTiddler>has[title]] +[!match[]] :else[<paletteTitle>get[palette-import]has[title]] +[!match[]] :filter[enlist<exclusions>match<currentTiddler>count[]compare:number:eq[0]] :map[function[colour-inner-descend-imported-palette],<name>,<currentTiddler>,<exclusions>,<paletteTitle>] +[!match[]] 
+	\end colour-inner-get-imported-palette
+
+	<!-- Helper to extend the exclusions list with the parent palette before descending -->
+	\function colour-inner-descend-imported-palette(name,paletteTitle,exclusions,parentTitle)
+	[enlist<exclusions>] [<parentTitle>] +[format:titlelist[]join[ ]] :map[function[colour-inner-get-palette-entry],<name>,<paletteTitle>,<currentTiddler>]
+	\end colour-inner-descend-imported-palette
+
+	\function colour-inner-get-palette-entry(name,paletteTitle,exclusions)
+	[<name>addsuffix[@]addsuffix<scheme>] :map[<paletteTitle>getindex<currentTiddler>] +[!match[]] :else[<paletteTitle>getindex<name>] :map[tf.colour-inner-transform-classic-palette-entry<currentTiddler>] :else[function[colour-inner-get-imported-palette],<name>,<paletteTitle>,<exclusions>]
+	\end colour-inner-get-palette-entry
+
+	<!-- Note the join, needed to cope with palette entries containing spaces -->
+	\function tf.colour(name)
+	[function[colour-inner-get-palette-entry],<name>,<paletteTitle>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :map[subfilter:all<currentTiddler>join[ ]]
+	\end tf.colour
+
+	\function colour(name)
+	[tf.colour<name>]
+	\end colour
+
+	\function color(name)
+	[tf.colour<name>]
+	\end color
+
+	<$let
+		color-scheme-filter={{{ [<paletteTitle>get[color-scheme]] :else[<paletteTitle>get[palette-import]get[color-scheme]] :else[[light]] }}}
+		scheme={{{ [subfilter:all<color-scheme-filter>] }}}
+	>
+		<$slot $name="ts-raw"/>
+	</$let>
+\end $palette.preview
+
+\function tf.colour-inner-transform-classic-palette-entry(colour-result)
+[<colour-result>prefix[<<colour ]suffix[>>]removeprefix[<<colour ]removesuffix[>>]addprefix<colour-function-prefix>addsuffix<colour-function-suffix>] :else[<colour-result>]
+\end tf.colour-inner-transform-classic-palette-entry
+
+<!-- Translucent entries are composited over the background entry before their contrast is measured -->
+\function tf.check-colour-contrast-subfunction()
+[function[colour],[background]] =>backdrop [function[colour],<paletteEntryA>colour-composite<backdrop>] =>colourA [function[colour],<paletteEntryB>colour-composite<backdrop>] =>colourB [<colourA>] [<colourB>] +[colour-contrast[]fixed[3]]
+\end tf.check-colour-contrast-subfunction
+
+\function tf.check-colour-contrast(paletteEntryA,paletteEntryB,threshold)
+[function[tf.check-colour-contrast-subfunction]compare:number:gt<threshold>then[ok]] :else[function[tf.check-colour-contrast-subfunction]addsuffix[: ]addsuffix<paletteEntryA>addsuffix[/]addsuffix<paletteEntryB>addsuffix[ contrast is too low]]
+\end tf.check-colour-contrast
+
+\function tf.interpolate-colours(paletteEntryA,paletteEntryB,weight)
+[function[colour],<paletteEntryA>] =>colourA [function[colour],<paletteEntryB>] =>colourB [<weight>colour-interpolate:oklch<colourA>,<colourB>]
+\end tf.interpolate-colours

 \procedure datauri(title)
 <$macrocall $name="makedatauri" type={{{ [<title>get[type]] }}} text={{{ [<title>get[text]] }}} _canonical_uri={{{ [<title>get[_canonical_uri]] }}}/>
@@ -6,5 +6,5 @@ $:/language/
 \end

 \define lingo(title)
-{{$(lingo-base)$$title$}}
+{{||$(lingo-base)$$title$}}
 \end
@@ -167,7 +167,7 @@ The second ESC tries to close the "draft tiddler"
 <!-- keep those variables because they may "bleed" into macros using old syntax -->
 <!-- "nonSystemTagsFilter", "systemTagsFilter" __need to be the same__ as fields: "first-search-filter", "second-search-filter" -->
 <$let
-	palette={{$:/palette}}
+	palette="$:/temp/palette-colours"
 	colourA={{{ [<palette>getindex[foreground]] }}}
 	colourB={{{ [<palette>getindex[background]] }}}
 	fallbackTarget={{{ [<palette>getindex[tag-background]] }}}
@@ -28,15 +28,16 @@ color:$(foregroundColor)$;
 </$let>
 \end

+<!-- Note that the 'palette' parameter is unused and is only retained for backwards compatibility -->
 \define tag-pill-body(tag,icon,colour,palette,element-tag,element-attributes,actions)
 \whitespace trim
 <$macrocall $name="tag-pill-inner"
 	tag=<<__tag__>>
 	icon=<<__icon__>>
 	colour=<<__colour__>>
-	fallbackTarget={{$palette$##tag-background}}
-	colourA={{$palette$##foreground}}
-	colourB={{$palette$##background}}
+	fallbackTarget=<<colour tag-background>>
+	colourA=<<colour foreground>>
+	colourB=<<colour background>>
 	element-tag=<<__element-tag__>>
 	element-attributes=<<__element-attributes__>>
 	actions=<<__actions__>>
@@ -51,7 +52,6 @@ color:$(foregroundColor)$;
 			tag=<<__tag__>>
 			icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}}
 			colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
-			palette={{$:/palette}}
 			element-tag=<<__element-tag__>>
 			element-attributes=<<__element-attributes__>>
 			actions=<<__actions__>>/>
@@ -1,3 +1,3 @@
 title: $:/palette

-$:/palettes/Vanilla
+$:/palettes/AutoToggle
@@ -1,19 +1,30 @@
 title: $:/snippets/paletteswitcher

+\parameters (thumbnails)
+
 \whitespace trim
-<$linkcatcher to="$:/palette">
-<div class="tc-chooser">
-<$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]!is[draft]sort[name]]">
-<$set name="cls" filter="[all[current]prefix{$:/palette}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item">
-<div class=<<cls>>>
-<$link to={{!!title}}>
-''<$view field="name" format="text"/>''
-&#32;-&#32;
-<$view field="description" format="text"/>
-{{||$:/snippets/currpalettepreview}}
-</$link>
-</div>
-</$set>
-</$list>
+\procedure actions()
+<$action-setfield $tiddler="$:/palette" text=<<navigateTo>>/>
+\end actions
+
+<!-- Display palette in currentTiddler with selection logic -->
+\procedure palette-entry(thumbnails)
+<div class={{{ [<currentTiddler>match{$:/palette}then[tc-chosen]] tc-chooser-item +[join[ ]] }}}>
+	<$link to={{!!title}} aria-label=`${[[$:/language/ControlPanel/Palette/Caption]get[text]]}$ - ${[all[current]get[name]]}$. ${[all[current]get[description]]}$`>
+		<%if [<thumbnails>match[yes]] %>
+			{{||$:/snippets/currpalettepreview}}
+		<%endif%>
+		''<$view field="name" format="text"/>''
+		<br>
+		<$view field="description" format="text"/>
+	</$link>
 </div>
+\end palette-entry
+
+<$linkcatcher actions=<<actions>>>
+	<div class={{{ tc-chooser [<thumbnails>match[yes]then[tc-chooser-cards]] +[join[ ]] }}}>
+		<$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]!is[draft]sort[name]]">
+			<$transclude $variable="palette-entry" thumbnails=<<thumbnails>>/>
+		</$list>
+	</div>
 </$linkcatcher>
@@ -0,0 +1,19 @@
+title: $:/snippets/palettetests
+
+<$let failureCount={{{ [[$:/temp/palette-colours]indexes[]prefix[?]] :filter[[$:/temp/palette-colours]getindex<currentTiddler>!match[ok]] +[count[]] }}}>
+
+<%if [<failureCount>compare:number:gt[0]] %>
+
+Palette test failures: <$text text=<<failureCount>>/>
+
+<$list filter="[[$:/temp/palette-colours]indexes[]prefix[?]sort[]]" variable="name">
+	<%if [[$:/temp/palette-colours]getindex<name>!match[ok]] %>
+		<div>
+			''<$text text={{{ [<name>removeprefix[?]] }}}/>'': <$text text={{{ [[$:/temp/palette-colours]getindex<name>] }}}/>
+		</div>
+	<%endif%>
+</$list>
+
+<%endif%>
+
+</$let>
@@ -0,0 +1,2 @@
+title: $:/tags/ControlPanel/Appearance
+text: $:/core/ui/ControlPanel/Palette $:/core/ui/ControlPanel/StoryView $:/core/ui/ControlPanel/Theme $:/core/ui/ControlPanel/Toolbars
@@ -0,0 +1,2 @@
+title: $:/tags/Preview/Page
+list: $:/core/ui/Palettes/Preview/Alert $:/core/ui/Palettes/Preview/Notification $:/core/ui/Palettes/Preview/Story $:/core/ui/Palettes/Preview/Sidebar
@@ -0,0 +1,2 @@
+title: $:/tags/Preview/SideBar
+list: $:/core/ui/Palettes/Preview/Sidebar/Title $:/core/ui/Palettes/Preview/Sidebar/Subtitle $:/core/ui/Palettes/Preview/Sidebar/Search $:/core/ui/Palettes/Preview/Sidebar/Tabs
@@ -0,0 +1,2 @@
+title: $:/tags/Preview/Tiddler
+list: $:/core/ui/Palettes/Preview/Tiddler/Header $:/core/ui/Palettes/Preview/Tiddler/Subtitle $:/core/ui/Palettes/Preview/Tiddler/Body
@@ -1,2 +1,2 @@
 title: $:/tags/ViewTemplateBodyFilter
-list: $:/config/ViewTemplateBodyFilters/testcase $:/config/ViewTemplateBodyFilters/hide-body $:/config/ViewTemplateBodyFilters/code-body $:/config/ViewTemplateBodyFilters/stylesheet $:/config/ViewTemplateBodyFilters/core-ui-advanced-search $:/config/ViewTemplateBodyFilters/core-ui-tags $:/config/ViewTemplateBodyFilters/import $:/config/ViewTemplateBodyFilters/plugin $:/config/ViewTemplateBodyFilters/html $:/config/ViewTemplateBodyFilters/system $:/config/ViewTemplateBodyFilters/default
+list: $:/config/ViewTemplateBodyFilters/testcase $:/config/ViewTemplateBodyFilters/hide-body $:/config/ViewTemplateBodyFilters/code-body $:/config/ViewTemplateBodyFilters/stylesheet $:/config/ViewTemplateBodyFilters/core-ui-advanced-search $:/config/ViewTemplateBodyFilters/core-ui-tags $:/config/ViewTemplateBodyFilters/import $:/config/ViewTemplateBodyFilters/plugin $:/config/ViewTemplateBodyFilters/html $:/config/ViewTemplateBodyFilters/system $:/config/ViewTemplateBodyFilters/palette $:/config/ViewTemplateBodyFilters/default
@@ -1,3 +0,0 @@
-title: $:/palette
-
-$:/palettes/Vanilla
@@ -2,6 +2,7 @@ created: 20131127215321439
 modified: 20140912135951542
 title: $:/DefaultTiddlers

+[[$:/PaletteManager]]
 [[TiddlyWiki Pre-release]]
 HelloThere
 [[Quick Start]]
@@ -14,6 +14,8 @@
 		"tiddlywiki/jszip",
 		"tiddlywiki/confetti",
 		"tiddlywiki/tour",
+		"tiddlywiki/palettes-legacy",
+		"tiddlywiki/palettes-2026",
 		"tiddlywiki/dom-to-image"
 	],
 	"themes": [
@@ -6,8 +6,8 @@ const crossPlatformIndexPath = indexPath.replace(/^\/+/, "");


 test("get started link", async ({ page }) => {
-	// The tests can take a while to run
-	const timeout = 1000 * 60;
+	// The tests can take a while to run, especially on CI runners
+	const timeout = 1000 * 180;
 	test.setTimeout(timeout);

 	// Load the generated test TW html
@@ -0,0 +1,27 @@
+title: Filters/DefaultFilterRunPrefixPragma
+description: Test Default Filter Run Prefix Pragma
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\whitespace trim
+
+\procedure mysubfilter() 1 1 +[join[Y]]
+
+(<$text text={{{ ::defaultprefix:all 1 1 [subfilter<mysubfilter>] +[join[X]] }}}/>)
+
+(<$text text={{{ 1 1 ::defaultprefix:all 1 1 }}}/>)
+
+(<$text text={{{ ::defaultprefix:and ::defaultprefix:all 1 1 +[join[X]] }}}/>)
+
+(<$text text={{{ ::defaultprefix:bogus [[x]] }}}/>)
+
+(<$text text={{{ ::defaultprefix 1 1 +[count[]] }}}/>)
+
+(<$text text={{{ ::nonexistent X }}}/>)
+
+
+title: ExpectedResult
+
+<p>(1X1X1Y1)</p><p>(Filter Error: Filter pragmas are only allowed at the start of a filter)</p><p>(1X1)</p><p>(Filter Error: Unknown prefix for filter run)</p><p>(1)</p><p>(Filter Error: Unknown filter pragma)</p>
@@ -0,0 +1,22 @@
+title: Filters/Filter
+description: Test filter operator
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\whitespace trim
+
+\procedure test-filter() 1 1 +[join[X]] +[!match<currentTiddler>]
+
+(<$text text={{{ [filter<test-filter>] +[join[ ]] }}}/>)
+
+(<$text text={{{ [filter:all<test-filter>] +[join[ ]] }}}/>)
+
+
+title: 1X1
+
+
+title: ExpectedResult
+
+<p>($:/core 1X1 ExpectedResult Output)</p><p>($:/core ExpectedResult Output)</p>
@@ -0,0 +1,20 @@
+title: Filters/Subfilter
+description: Test subfilter operator
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\whitespace trim
+
+\procedure test-data() 1 2 1 3 3 4
+
+(<$text text={{{ [subfilter<test-data>] +[join[ ]] }}}/>)
+
+(<$text text={{{ [subfilter:all<test-data>] +[join[ ]] }}}/>)
+
+
+
+title: ExpectedResult
+
+<p>(2 1 3 4)</p><p>(1 2 1 3 3 4)</p>
@@ -0,0 +1,24 @@
+title: Genesis/SourceAndDuplicateFilters
+description: Attribute name/value filters that depend on the source tiddlers, and duplicate values that must not be deduplicated
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Apple
+tags: GenesisTag
+
+
+title: banana
+tags: GenesisTag
+
+
+title: Output
+
+\whitespace trim
+<$genesis $type="span" $names="[tag[GenesisTag]addprefix[data-]]" $values="same same"/>
+<$setmultiplevariables $names="[[x]] [[y]]" $values="[[same]] [[same]]">
+<<x>>-<<y>>
+</$setmultiplevariables>
+
+title: ExpectedResult
+
+<p><span data-Apple="same" data-banana="same"></span>same-same</p>
@@ -0,0 +1,12 @@
+title: Macros/ContrastColour/ContrastColourBasic
+description: Basic usage of contrastcolour macro
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+Colour: <<contrastcolour target:#1e90ff fallbackTarget:#eecc66 colourA:#333333 colourB:#ffffff>>
+
+title: ExpectedResult
+
+<p>Colour: #ffffff</p>
@@ -0,0 +1,18 @@
+title: Operators/ChangeCount
+description: changecount operator returns per-title change counts
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+(<$text text={{{ [[T]changecount[]] }}}/>)(<$text text={{{ [[U]changecount[]] }}}/>)
+
+title: Actions
+
+<$action-setfield $tiddler="T" text="first"/>
+<$action-setfield $tiddler="T" text="second"/>
+
+title: ExpectedResult
+
+(2)(0)
@@ -0,0 +1,17 @@
+title: Operators/Colour/ColourBestContrast
+description: Best contrast colour function
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
+
+title: Filter
+
+[[black]] [[gray]] [[green]] +[colour-best-contrast[]]
+
+title: ExpectedResult
+
+black
@@ -0,0 +1,17 @@
+title: Operators/Colour/ColourBestContrastInvalidTarget
+description: colour-best-contrast with an unparseable target colour returns nothing instead of crashing
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] +[count[]] }}}/>
+
+title: Filter
+
+[[red]] [[blue]] [[notacolour]] +[colour-best-contrast[]]
+
+title: ExpectedResult
+
+0
@@ -0,0 +1,21 @@
+title: Operators/Colour/ColourComposite
+description: Compositing translucent colours over a backdrop
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
+
+title: Filter
+
+=[[#1919191A]colour-composite[white]]
+=[[red]colour-composite[white]]
+=[[#80808080]colour-composite[black]]
+=[[#80808080]colour-composite[nonsense]]
+[join[,]]
+
+title: ExpectedResult
+
+rgb(90.804% 90.804% 90.804%),rgb(100% 0% 0%),rgb(25.196% 25.196% 25.196%),#80808080
@@ -0,0 +1,17 @@
+title: Operators/Colour/ColourContrast
+description: Contrast colour function
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
+
+title: Filter
+
+[[black]] [[gray]] +[colour-contrast[]trunc[]]
+
+title: ExpectedResult
+
+35
@@ -0,0 +1,17 @@
+title: Operators/Colour/ColourDarken
+description: Darken colour function
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
+
+title: Filter
+
+[[#5778d8]colour-darken[0.5]]
+
+title: ExpectedResult
+
+#0f1d77
@@ -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
@@ -0,0 +1,20 @@
+title: Operators/Colour/ColourGetOklchAchromatic
+description: colour-get-oklch hue of achromatic colours returns empty instead of crashing
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
+
+title: Filter
+
+=[[white]colour-get-oklch:h[]]
+=[[#808080]colour-get-oklch:h[]]
+=[[red]colour-get-oklch:h[]fixed[3]]
+[join[,]]
+
+title: ExpectedResult
+
+,,29.234
@@ -0,0 +1,18 @@
+title: Operators/Colour/ColourInterpolate
+description: colour-interpolate function
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
+
+title: Filter
+
+0.2 0.5 0.99
+[colour-interpolate:oklch[#5778d8],[#d85757]join[,]]
+
+title: ExpectedResult
+
+oklch(60.08% 0.15344 290.55),oklch(60.956% 0.15699 325.23),oklch(62.386% 0.1628 381.88)
@@ -0,0 +1,26 @@
+title: Operators/Colour/ColourInterpolateSuffixes
+description: colour-interpolate colour space and hue adjuster suffixes
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] +[join[;]] }}}/>|<$text text={{{ [subfilter{Empties}] +[count[]] }}}/>
+
+title: Filter
+
+=[[0.5]colour-interpolate[#5778d8],[#d85757]]
+=[[0.5]colour-interpolate:bogus[#5778d8],[#d85757]]
+=[[0.5]colour-interpolate:lch[#5778d8],[#d85757]]
+=[[0.5]colour-interpolate:oklch:raw[red],[blue]]
+=[[0.5]colour-interpolate:oklch:shorter[red],[blue]]
+
+title: Empties
+
+=[[0.5]colour-interpolate[#5778d8]]
+=[[0.5]colour-interpolate[nope],[#d85757]]
+
+title: ExpectedResult
+
+rgb(59.412% 40.588% 59.412%);lch(53.15% 56.728 334.64);lch(53.15% 56.728 334.64);oklch(53.998% 0.28545 146.64);oklch(53.998% 0.28545 326.64)|0
@@ -0,0 +1,17 @@
+title: Operators/Colour/ColourLighten
+description: Lighten colour function
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\parsermode inline
+<$text text={{{ [subfilter{Filter}] }}}/>
+
+title: Filter
+
+[[#5778d8]colour-lighten[0.5]]
+
+title: ExpectedResult
+
+#c6dbff
@@ -0,0 +1,17 @@
+title: Operators/Colour/ColourSetOklch
+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-set-oklch[0.5]] =[[#5778d8]colour-set-oklch:l[0.5]] +[join[,]]
+
+title: ExpectedResult
+
+#3d5bb8,#3d5bb8
@@ -0,0 +1,45 @@
+
+title: Operators/Palettes/BasicLookup
+description: Basic palette lookups
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<colour page-background>>
+<<colour background>>
+
+title: Actions
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<actions-recompile-current-palette>>
+
+title: $:/palette
+
+MyPalette
+
+title: MyPalette
+name: My Palette
+description: My custom palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+palette-import: MyOtherPalette
+color-scheme: light
+
+page-background: <<colour custom>>
+custom: #f4e4d4
+
+title: MyOtherPalette
+name: My Other Palette
+description: My other custom palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+
+page-background: #d4e4f4
+background: red
+
+title: ExpectedResult
+
+<p>#f4e4d4</p><p>red</p>
@@ -0,0 +1,45 @@
+title: Operators/Palettes/CustomisationLayer
+description: A customisation layer overrides the palette it imports, and dormant layers are ignored
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+(<<colour page-background>>)
+(<<colour background>>)
+
+title: Actions
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<actions-recompile-current-palette>>
+
+title: $:/palette
+
+MyPalette
+
+title: MyPalette
+name: My Palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+
+page-background: #d4e4f4
+background: #ffffff
+
+title: $:/config/PaletteCustomisations/MyPalette
+palette-import: MyPalette
+type: application/x-tiddler-dictionary
+
+page-background: #123456
+
+title: $:/config/PaletteCustomisations/OtherPalette
+palette-import: OtherPalette
+type: application/x-tiddler-dictionary
+
+background: #999999
+
+title: ExpectedResult
+
+<p>(#123456)
+(#ffffff)</p>
@@ -0,0 +1,35 @@
+title: Operators/Palettes/CustomisationLayerIncomplete
+description: A customisation layer without a palette-import field is ignored
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+(<<colour page-background>>)
+
+title: Actions
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<actions-recompile-current-palette>>
+
+title: $:/palette
+
+MyPalette
+
+title: MyPalette
+name: My Palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+
+page-background: #d4e4f4
+
+title: $:/config/PaletteCustomisations/MyPalette
+type: application/x-tiddler-dictionary
+
+page-background: #123456
+
+title: ExpectedResult
+
+<p>(#d4e4f4)</p>
@@ -0,0 +1,36 @@
+title: Operators/Palettes/CustomisationLayerSchemes
+description: Scheme-suffixed entries in a customisation layer are applied
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+(<<colour page-background>>)
+
+title: Actions
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<actions-recompile-current-palette>>
+
+title: $:/palette
+
+MyPalette
+
+title: MyPalette
+name: My Palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: dark
+
+page-background: #d4e4f4
+
+title: $:/config/PaletteCustomisations/MyPalette
+palette-import: MyPalette
+type: application/x-tiddler-dictionary
+
+page-background@dark: #222222
+
+title: ExpectedResult
+
+<p>(#222222)</p>
@@ -0,0 +1,34 @@
+title: Operators/Palettes/DerivedEntries
+description: Palette entries derived with tf.interpolate-colours and colour-set-alpha
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+(<<colour derived>>)
+(<<colour wash>>)
+
+title: Actions
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<actions-recompile-current-palette>>
+
+title: $:/palette
+
+MyPalette
+
+title: MyPalette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+
+base-a: #000000
+base-b: #ffffff
+derived: [tf.interpolate-colours[base-a],[base-b],[0.5]]
+wash: [tf.colour[base-b]colour-set-alpha[0.5]]
+
+title: ExpectedResult
+
+<p>(oklch(50% 0 0))
+(#ffffff80)</p>
@@ -0,0 +1,24 @@
+title: Operators/Palettes/MissingPaletteFallback
+description: A missing current palette falls back to Vanilla
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+(<<colour background>>)
+(<<colour foreground>>)
+
+title: Actions
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<actions-recompile-current-palette>>
+
+title: $:/palette
+
+$:/palettes/DoesNotExist
+
+title: ExpectedResult
+
+<p>(#ffffff)
+(#333333)</p>
@@ -0,0 +1,39 @@
+title: Operators/Palettes/PreviewCyclicImports
+description: The palette.preview widget copes with palettes that import each other in a circular loop
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<$palette.preview paletteTitle="PaletteA">
+<<colour local>>
+<<colour inherited>>
+<<colour missing>>
+</$palette.preview>
+
+title: PaletteA
+name: Palette A
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+palette-import: PaletteB
+color-scheme: light
+
+local: #111111
+
+title: PaletteB
+name: Palette B
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+palette-import: PaletteA
+color-scheme: light
+
+inherited: #222222
+
+title: ExpectedResult
+
+<p>
+#111111
+#222222
+
+</p>
@@ -0,0 +1,30 @@
+title: Operators/Palettes/PreviewSchemeLookup
+description: The palette.preview widget resolves scheme-suffixed entries
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<$palette.preview paletteTitle="MyPalette">
+<<colour page-background>>
+<<colour only-dark>>
+</$palette.preview>
+
+title: MyPalette
+name: My Palette
+description: Palette with scheme-suffixed entries
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: dark
+
+page-background: #fe0
+page-background@dark: #221
+only-dark@dark: #123
+
+title: ExpectedResult
+
+<p>
+#221
+#123
+</p>
@@ -0,0 +1,40 @@
+title: Operators/Palettes/ReadabilityTests
+description: Readability test entries report ok, failure messages, and composite translucent colours
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+(<$text text={{{ [[$:/temp/palette-colours]getindex[?pass]] }}}/>)
+(<$text text={{{ [[$:/temp/palette-colours]getindex[?fail]] }}}/>)
+(<$text text={{{ [[$:/temp/palette-colours]getindex[?wash]] }}}/>)
+
+title: Actions
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<actions-recompile-current-palette>>
+
+title: $:/palette
+
+MyPalette
+
+title: MyPalette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+
+background: #000000
+foreground: #ffffff
+greya: #888888
+greyb: #999999
+wash: #ffffff19
+?pass: [tf.check-colour-contrast[background],[foreground],[45]]
+?fail: [tf.check-colour-contrast[greya],[greyb],[45]]
+?wash: [tf.check-colour-contrast[wash],[foreground],[45]]
+
+title: ExpectedResult
+
+<p>(ok)
+(0.000: greya/greyb contrast is too low)
+(ok)</p>
@@ -0,0 +1,35 @@
+title: Operators/Palettes/RecursiveEntryDefinitions
+description: Palette entries with recursive definitions are blanked and reported as test failures
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+(<<colour self-ref>>)
+(<<colour background>>)
+(<$text text={{{ [[$:/temp/palette-colours]getindex[?recursion-self-ref]] }}}/>)
+
+title: Actions
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<actions-recompile-current-palette>>
+
+title: $:/palette
+
+MyPalette
+
+title: MyPalette
+name: My Palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+
+self-ref: [function[colour],[self-ref]]
+background: #fff
+
+title: ExpectedResult
+
+<p>()
+(#fff)
+(the definition of 'self-ref' is recursive)</p>
@@ -0,0 +1,61 @@
+
+title: Operators/Palettes/RecursivePalettes
+description: Palettes that import each other in a circular loop
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<colour page-background>>
+<<colour background>>
+<<colour custom>>
+<<colour foreground>>
+
+title: Actions
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<actions-recompile-current-palette>>
+
+title: $:/palette
+
+MyPalette
+
+title: MyPalette
+name: My Palette
+description: My custom palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+palette-import: MyOtherPalette
+color-scheme: light
+
+page-background: <<colour custom>>
+custom: #f4e4d4
+
+title: MyOtherPalette
+name: My Other Palette
+description: My other custom palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+palette-import: MyFurtherPalette
+color-scheme: light
+
+page-background: #d4e4f4
+background: red
+
+title: MyFurtherPalette
+name: My Further Palette
+description: My further custom palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+palette-import: MyPalette
+color-scheme: light
+
+foreground: green
+
+title: ExpectedResult
+
+<p>+#f4e4d4
+red
+#f4e4d4
+green</p>
@@ -0,0 +1,52 @@
+title: Operators/Palettes/SchemeImports
+description: Scheme-suffixed palette imports follow the scheme chosen by a filter-valued color-scheme field
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+(<<colour background>>)
+(<$text text={{{ [[$:/temp/palette-colours]get[color-scheme]] }}}/>)
+
+title: Actions
+
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<<actions-recompile-current-palette>>
+
+title: $:/palette
+
+TogglePalette
+
+title: SchemeSwitch
+
+dark
+
+title: TogglePalette
+name: Toggle Palette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: [{SchemeSwitch}] :else[[light]]
+palette-import@light: LightPalette
+palette-import@dark: DarkPalette
+
+marker: #123456
+
+title: LightPalette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: light
+
+background: #eeeeee
+
+title: DarkPalette
+tags: $:/tags/Palette
+type: application/x-tiddler-dictionary
+color-scheme: dark
+
+background: #111111
+
+title: ExpectedResult
+
+<p>(#111111)
+(dark)</p>
--- a/Show More
+++ b/Show More