Add colour swatches to palette switcher

core/ui/PageMacros.tid

@@ -1,5 +1,8 @@
 title: $:/core/ui/PageMacros
 
+\define colour(name)
+<$transclude tiddler={{$:/palette}} index="$name$"/>
+\end
 \define tabs(tabsList,default,state:"$:/state/tab")
 <div class="tw-tab-buttons"><$list filter="$tabsList$" variable="currentTab"><$button set=<<qualify "$state$">> setTo=<<currentTab>> default="$default$" selectedClass="tw-tab-selected"><$transclude tiddler=<<currentTab>> field="caption"><$macrocall $name="currentTab" $type="text/plain" $output="text/plain"/></$transclude> </$button>
 </$list>

core/wiki/palettepreview.tid

@@ -0,0 +1,20 @@
+title: $:/snippets/palettepreview
+
+\define swatchStyle()
+background-color: $(swatchColour)$;
+\end
+\define swatch(colour)
+<$set name="currentTiddler" value={{$:/palette}}>
+<$set name="swatchColour" value={{##$colour$}}>
+<div class="tw-swatch" style=<<swatchStyle>>/>
+</$set>
+</$set>
+\end
+
+<div class="tw-swatches-horiz">
+<<swatch foreground>>
+<<swatch background>>
+<<swatch muted-foreground>>
+<<swatch primary>>
+<<swatch page-background>>
+</div>

core/wiki/paletteswitcher.tid

@@ -3,6 +3,8 @@ title: $:/snippets/paletteswitcher
 \define lingo-base() $:/language/ControlPanel/Appearance/Palette/
 <<lingo Prompt>> <$view tiddler={{$:/palette}} field="name"/>
 
+{{$:/snippets/palettepreview}}
+
 <$linkcatcher to="$:/palette">
 <$list filter="[is[shadow]tag[$:/tags/Palette]] [!is[shadow]tag[$:/tags/Palette]] +[sort[description]]"><div><$reveal state="$:/palette" type="match" text={{!!title}}>&bull;</$reveal><$reveal state="$:/palette" type="nomatch" text={{!!title}}>&nbsp;</$reveal> <$link to={{!!title}}>''<$view field="name" format="text"/>'' - <$view field="description" format="text"/></$link></div>
 </$list>

themes/tiddlywiki/vanilla/base.tid

@@ -993,3 +993,22 @@ canvas.tw-edit-bitmapeditor  {
 	width: 150px;
 	margin: 0px 0px 12px 12px;
 }
+
+/*
+** Palette swatches
+*/
+
+.tw-swatches-horiz {
+	
+}
+
+.tw-swatches-horiz .tw-swatch {
+	display: inline-block;
+}
+
+.tw-swatch {
+	width: 2em;
+	height: 2em;
+	margin: 4px;
+	border: 1px solid #000;
+}