diff --git a/core/ui/PaletteManager.tid b/core/ui/PaletteManager.tid
index 81403d1f6..f33921e11 100644
--- a/core/ui/PaletteManager.tid
+++ b/core/ui/PaletteManager.tid
@@ -2,6 +2,7 @@ title: $:/PaletteManager
\define lingo-base() $:/language/ControlPanel/Palette/
+
\procedure palette-link()
<$tiddler tiddler={{$:/palette}}>
<$link to={{!!title}}>
diff --git a/core/ui/Palettes/Preview/Alert.tid b/core/ui/Palettes/Preview/Alert.tid
index cd523ff42..220d1ab9b 100644
--- a/core/ui/Palettes/Preview/Alert.tid
+++ b/core/ui/Palettes/Preview/Alert.tid
@@ -1,19 +1,19 @@
title: $:/core/ui/Palettes/Preview/Alert
-tags: $:/tags/Preview/PageOptional
+tags: $:/tags/Preview/Page
\whitespace trim
-<$colour.div class="tc-palette-preview-thumbnail-alert" styleName="background-color" styleColour="alert-background">
- <$colour.div class="tc-palette-preview-thumbnail-alert-border" styleName="border-color" styleColour="alert-border">
- <$colour.div styleName="color" styleColour="foreground">
- <$colour.div class="tc-palette-preview-thumbnail-alert-subtitle" styleName="color" styleColour="alert-muted-foreground">
+>>
+
>>
+
>>
+
>>
Lorem Ipsum
- <$colour.div class="tc-palette-preview-thumbnail-alert-highlight" styleName="color" styleColour="alert-highlight">
+
>>
(Count: 1)
-
-
- <$colour.div class="tc-palette-preview-thumbnail-alert-body">
+
+
+
Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Sed Do Eiusmod Tempor Incididunt.
-
-
-
-
\ No newline at end of file
+
+
+
+
>>
+
>>
+
>>
Lorem Ipsum Dolor Sit Amet Consectetur
-
-
-
\ No newline at end of file
+
+
+
<$list filter="HelloThere GettingStarted" variable="title">
<
>
-
\ No newline at end of file
+>>
+ <%if [
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.
+
+ <%endif%>
+</div>
diff --git a/core/ui/Palettes/Preview/Tiddler/Header.tid b/core/ui/Palettes/Preview/Tiddler/Header.tid
index 5e4fdad9c..4dae28698 100644
--- a/core/ui/Palettes/Preview/Tiddler/Header.tid
+++ b/core/ui/Palettes/Preview/Tiddler/Header.tid
@@ -2,13 +2,13 @@ title: $:/core/ui/Palettes/Preview/Tiddler/Header
tags: $:/tags/Preview/Tiddler
\whitespace trim
-<$colour.div class="tc-palette-preview-thumbnail-tiddler-header">
-<$colour.div class="tc-palette-preview-thumbnail-tiddler-title" styleName="color" styleColour="tiddler-title-foreground">
- <$text text=<<title>>/>
-</$colour.div>
-<$colour.div class="tc-palette-preview-thumbnail-tiddler-toolbar" styleName="fill" styleColour="tiddler-controls-foreground">
- {{$:/core/images/down-arrow}}
- {{$:/core/images/edit-button}}
- {{$:/core/images/close-button}}
-</$colour.div>
-</$colour.div>
+<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>
diff --git a/core/ui/Palettes/Preview/Tiddler/Subtitle.tid b/core/ui/Palettes/Preview/Tiddler/Subtitle.tid
index 949765ec7..3890a91ea 100644
--- a/core/ui/Palettes/Preview/Tiddler/Subtitle.tid
+++ b/core/ui/Palettes/Preview/Tiddler/Subtitle.tid
@@ -2,6 +2,6 @@ title: $:/core/ui/Palettes/Preview/Tiddler/Subtitle
tags: $:/tags/Preview/Tiddler
\whitespace trim
-<$colour.div class="tc-palette-preview-thumbnail-tiddler-subtitle" styleName="color" styleColour="tiddler-subtitle-foreground">
+<div class="tc-palette-preview-thumbnail-tiddler-subtitle" style.color=<<colour tiddler-subtitle-foreground>>>
Motovun Jack
-</$colour.div>
+</div>
diff --git a/core/wiki/currpalettepreview.tid b/core/wiki/currpalettepreview.tid
index d2ecdee68..a81426e1b 100644
--- a/core/wiki/currpalettepreview.tid
+++ b/core/wiki/currpalettepreview.tid
@@ -2,65 +2,15 @@ title: $:/snippets/currpalettepreview
\whitespace trim
-\procedure colour-div-filtered(class,styleName,styleColour)
-
-\function colour-inner-get-imported-palette(name,tv-palette-name)
-[[palette-import@]addsuffix<scheme>] :map[<tv-palette-name>get<currentTiddler>has[title]] +[!match[]] :else[<tv-palette-name>get[palette-import]has[title]] :map[function[colour-inner-get-palette-entry],<name>,<currentTiddler>] +[!match[]]
-\end colour-inner-get-imported-palette
-
-\function colour-inner-get-palette-entry(name,tv-palette-name)
-[<name>addprefix[@]addprefix<scheme>] :map[<tv-palette-name>getindex<currentTiddler>] +[!match[]] :else[<tv-palette-name>getindex<name>] :map[tf.colour-inner-transform-classic-palette-entry<currentTiddler>] :else[function[colour-inner-get-imported-palette],<name>,<tv-palette-name>]
-\end colour-inner-get-palette-entry
-
-<!-- Note the join, needed to cope with palette entries containing spaces -->
-\function colour(name)
-[function[colour-inner-get-palette-entry],<name>,<tv-palette-name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :map[subfilter<currentTiddler>join[ ]]
-\end colour
-
-\function color(name)
-[function[colour],<name>]
-\end color
-
-<$let
- colour-result={{{ [function[colour],<styleColour>] }}}
->
- <div class=<<class>> style={{{ [<styleName>addsuffix[:]addsuffix<colour-result>addsuffix[;]] }}}>
- <$slot $name="ts-raw" $depth="2"/>
- </div>
-</$let>
-\end colour-div-filtered
-
-\widget $colour.div(class,styleName,styleColour)
-<%if [<styleName>!match[]] %>
- <$transclude $variable="colour-div-filtered" class=<<class>> styleName=<<styleName>> styleColour=<<styleColour>>/>
-<%else%>
- <div class=<<class>>>
- <$slot $name="ts-raw"/>
- </div>
-<%endif%>
-\end $colour.div
-
\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 palette-preview-thumbnail()
-<!-- Compute the scheme of the current palette -->
-<$let
- tv-palette-name=<<currentTiddler>>
- color-scheme-filter={{{ [<tv-palette-name>get[color-scheme]] :else[[light]] }}}
- scheme={{{ [subfilter<color-scheme-filter>] }}}
->
- <!-- Render the thumbnail and its child components -->
- <$colour.div class="tc-palette-preview-thumbnail" styleName="background-color" styleColour="page-background">
- <$list filter="[all[shadows+tiddlers]tag[$:/tags/Preview/Page]!has[draft.of]]" variable="componentTitle">
- <$transclude $tiddler=<<componentTitle>> title=<<title>>/>
- </$list>
- </$colour.div>
-</$let>
-\end palette-preview-thumbnail
-
<!-- currentTiddler is the palette to use -->
-<<palette-preview-thumbnail>>
+<$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>
diff --git a/core/wiki/macros/CSS.tid b/core/wiki/macros/CSS.tid
index be12fadb4..46f325cb3 100644
--- a/core/wiki/macros/CSS.tid
+++ b/core/wiki/macros/CSS.tid
@@ -101,6 +101,33 @@ tags: $:/tags/Macro
]]
\end colour-function-suffix
+\widget $palette.preview(paletteTitle)
+ \whitespace trim
+ \function colour-inner-get-imported-palette(name,paletteTitle)
+ [[palette-import@]addsuffix<scheme>] :map[<paletteTitle>get<currentTiddler>has[title]] +[!match[]] :else[<paletteTitle>get[palette-import]has[title]] :map[function[colour-inner-get-palette-entry],<name>,<currentTiddler>] +[!match[]]
+ \end colour-inner-get-imported-palette
+
+ \function colour-inner-get-palette-entry(name,paletteTitle)
+ [<name>addprefix[@]addprefix<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>]
+ \end colour-inner-get-palette-entry
+
+ <!-- Note the join, needed to cope with palette entries containing spaces -->
+ \function colour(name)
+ [function[colour-inner-get-palette-entry],<name>,<paletteTitle>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :map[subfilter<currentTiddler>join[ ]]
+ \end colour
+
+ \function color(name)
+ [function[colour],<name>]
+ \end color
+
+ <$let
+ color-scheme-filter={{{ [<paletteTitle>get[color-scheme]] :else[[light]] }}}
+ scheme={{{ [subfilter<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