Add palette editor

core/ui/ControlPanel/Appearance/Palette.tid

@@ -3,3 +3,12 @@ tags: $:/tags/ControlPanel/Appearance
 caption: {{$:/language/ControlPanel/Appearance/Palette/Caption}}
 
 {{$:/snippets/paletteswitcher}}
+
+<$reveal type="nomatch" state="$:/state/ShowPaletteEditor" text="yes">
+<$button set="$:/state/ShowPaletteEditor" setTo="yes">show editor</$button>
+</$reveal>
+<$reveal type="match" state="$:/state/ShowPaletteEditor" text="yes">
+<$button set="$:/state/ShowPaletteEditor" setTo="no">hide editor</$button>
+{{$:/snippets/paletteeditor}}
+</$reveal>
+

core/wiki/currpalettepreview.tid

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

core/wiki/paletteeditor.tid

@@ -0,0 +1,25 @@
+title: $:/snippets/paletteeditor
+
+<$set name="currentTiddler" value={{$:/palette}}>
+
+Editing <$link to={{$:/palette}}><$macrocall $name="currentTiddler" $output="text/plain"/></$link>
+
+<$list filter="[is[current]is[shadow]is[tiddler]]" variable="listItem">
+This shadow palette has been modified
+<$button message="tw-delete-tiddler" param={{$:/palette}}>reset</$button>
+</$list>
+
+<$list filter="[is[current]is[shadow]!is[tiddler]]" variable="listItem">
+It is recommended that you clone this shadow palette before editing it
+</$list>
+
+<$button message="tw-new-tiddler" param={{$:/palette}}>clone</$button>
+
+<table><tbody><$list filter="[is[current]indexes[]]" variable="colourName"><tr><td><$macrocall $name="colourName" $output="text/plain"/></td>
+<td><$edit-text index=<<colourName>> tag="input"/></td>
+<td><$edit-text index=<<colourName>> type="color" tag="input"/></td>
+</tr>
+</$list>
+</tbody>
+</table>
+</$set>

core/wiki/palettepreview.tid

@@ -1,20 +1,5 @@
 title: $:/snippets/palettepreview
 
-\define swatchStyle()
-background-color: $(swatchColour)$;
-\end
-\define swatch(colour)
 <$set name="currentTiddler" value={{$:/palette}}>
-<$set name="swatchColour" value={{##$colour$}}>
+<$transclude tiddler="$:/snippets/currpalettepreview"/>
-<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,9 +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>
+<div class="tw-chooser"><$list filter="[is[shadow]tag[$:/tags/Palette]] [!is[shadow]tag[$:/tags/Palette]] +[sort[description]]"><div class="tw-chooser-item"><$link to={{!!title}}><div><$reveal state="$:/palette" type="match" text={{!!title}}>&bull;</$reveal><$reveal state="$:/palette" type="nomatch" text={{!!title}}>&nbsp;</$reveal> ''<$view field="name" format="text"/>'' - <$view field="description" format="text"/></div><$transclude tiddler="$:/snippets/currpalettepreview"/></$link></div>
 </$list>
+</div>
 </$linkcatcher>

themes/tiddlywiki/vanilla/base.tid

@@ -994,12 +994,37 @@ canvas.tw-edit-bitmapeditor  {
 	margin: 0px 0px 12px 12px;
 }
 
+/*
+** Chooser
+*/
+
+.tw-chooser {
+	border: 1px solid <<colour table-border>>;
+}
+
+.tw-chooser-item {
+	border: 8px;
+}
+
+.tw-chooser-item a.tw-tiddlylink {
+	display: block;
+	text-decotoration: none;
+	color: <<colour tiddler-link-foreground>>;
+	background-color: <<colour tiddler-link-background>>;
+	margin: 4px;
+}
+
+.tw-chooser-item a.tw-tiddlylink:hover {
+	text-decoration: none;
+	color: <<colour tiddler-link-background>>;
+	background-color: <<colour tiddler-link-foreground>>;
+}
+
 /*
 ** Palette swatches
 */
 
 .tw-swatches-horiz {
-	
 }
 
 .tw-swatches-horiz .tw-swatch {