mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2025-02-23 14:30:02 +00:00

Also introduces palette inheritance This finally allows us to have a palette that automatically switches between dark and light variants. The mechanism is more flexible that that, and allows for multiple colour schemes (night, morning, day, evening, for example) with automatic switching between them.
100 lines
4.0 KiB
Plaintext
100 lines
4.0 KiB
Plaintext
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>] :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>addsuffix[@]addsuffix<scheme>get[text]] :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
|
|
|
|
\procedure colour-div-wikified(class,styleName,styleColour)
|
|
<!-- Define our own deeply backwards compatible local versions of the colour macro -->
|
|
\define colour(name)
|
|
\whitespace trim
|
|
<$transclude tiddler=<<tv-palette-name>> index="$name$@$(scheme)$">
|
|
<$transclude tiddler=<<tv-palette-name>> index="$name$">
|
|
<$let
|
|
prefixed-palette-import={{{ [[palette-import@]addsuffix<scheme>] }}}
|
|
tv-palette-name={{{ [<tv-palette-name>get<prefixed-palette-import>has[title]] :else[<tv-palette-name>get[palette-import]] }}}
|
|
>
|
|
<%if [<tv-palette-name>has[title]] %>
|
|
<$transclude $variable="colour" name=<<__name__>>/>
|
|
<%else%>
|
|
<$transclude tiddler="$:/config/DefaultColourMappings/$name$@$(scheme)$">
|
|
<$transclude tiddler="$:/config/DefaultColourMappings/$name$"/>
|
|
</$transclude>
|
|
<%endif%>
|
|
</$let>
|
|
</$transclude>
|
|
</$transclude>
|
|
\end colour
|
|
\define color(name) <<colour $name$>>
|
|
<$wikify name="colour-result" text={{{ [[<<colour ]addsuffix<styleColour>addsuffix[>>]] }}} mode="inline">
|
|
<div class=<<class>> style={{{ [<styleName>addsuffix[:]addsuffix<colour-result>addsuffix[;]] }}}>
|
|
<$slot $name="ts-raw" $depth="2"/>
|
|
</div>
|
|
</$wikify>
|
|
\end colour-div-wikified
|
|
|
|
\widget $colour.div(class,styleName,styleColour)
|
|
<%if [<styleName>!match[]] %>
|
|
<%if [<tv-palette-name>get[palette-type]match[modern]] %>
|
|
<$transclude $variable="colour-div-filtered" class=<<class>> styleName=<<styleName>> styleColour=<<styleColour>>/>
|
|
<%else%>
|
|
<$transclude $variable="colour-div-wikified" class=<<class>> styleName=<<styleName>> styleColour=<<styleColour>>/>
|
|
<%endif%>
|
|
<%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>>
|