mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-08-08 06:43:49 +00:00
Code Issues Releases Wiki Activity

Introduce tf.colour function to make palette entries more concise

Browse Source
This commit is contained in:
Jeremy Ruston 2025-02-13 16:26:22 +00:00
parent 0037813b39
commit d7df7eddb1
2 changed files with 102 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
core/palettes/TwentyTwenties.tid
View File

@ -47,119 +47,119 @@ base-magenta: #CE5D97
# base-magenta: #A02F6F # base-magenta: #A02F6F
# Colour definitions # Colour definitions
alert-background: [function[colour],[base-secondary]] alert-background: [tf.colour[base-secondary]]
alert-border: [tf.interpolate-colours[base-ink],[alert-background],[0.6]] alert-border: [tf.interpolate-colours[base-ink],[alert-background],[0.6]]
alert-highlight: [tf.interpolate-colours[base-ink],[base-primary],[0.3]] alert-highlight: [tf.interpolate-colours[base-ink],[base-primary],[0.3]]
alert-muted-foreground: [tf.interpolate-colours[base-ink],[alert-background],[0.4]] alert-muted-foreground: [tf.interpolate-colours[base-ink],[alert-background],[0.4]]
background: [function[colour],[base-paper]] background: [tf.colour[base-paper]]
blockquote-bar: [function[colour],[muted-foreground]] blockquote-bar: [tf.colour[muted-foreground]]
button-background: button-background:
button-foreground: button-foreground:
button-border: button-border:
code-background: [tf.interpolate-colours[base-paper],[base-tertiary],[0.1]] code-background: [tf.interpolate-colours[base-paper],[base-tertiary],[0.1]]
code-border: [tf.interpolate-colours[base-paper],[base-tertiary],[0.6]] code-border: [tf.interpolate-colours[base-paper],[base-tertiary],[0.6]]
code-foreground: [function[colour],[base-tertiary]] code-foreground: [tf.colour[base-tertiary]]
diff-delete-background: [function[colour],[base-red]] diff-delete-background: [tf.colour[base-red]]
diff-delete-foreground: [function[colour],[foreground]] diff-delete-foreground: [tf.colour[foreground]]
diff-equal-background: diff-equal-background:
diff-equal-foreground: [function[colour],[foreground]] diff-equal-foreground: [tf.colour[foreground]]
diff-insert-background: [function[colour],[base-green]] diff-insert-background: [tf.colour[base-green]]
diff-insert-foreground: [function[colour],[foreground]] diff-insert-foreground: [tf.colour[foreground]]
diff-invisible-background: diff-invisible-background:
diff-invisible-foreground: [function[colour],[muted-foreground]] diff-invisible-foreground: [tf.colour[muted-foreground]]
dirty-indicator: [function[colour],[base-tertiary]] dirty-indicator: [tf.colour[base-tertiary]]
download-background: [tf.interpolate-colours[base-paper],[base-green],[0.6]] download-background: [tf.interpolate-colours[base-paper],[base-green],[0.6]]
download-foreground: [tf.interpolate-colours[base-ink],[base-green],[0.1]] download-foreground: [tf.interpolate-colours[base-ink],[base-green],[0.1]]
dragger-background: [function[colour],[foreground]] dragger-background: [tf.colour[foreground]]
dragger-foreground: [function[colour],[background]] dragger-foreground: [tf.colour[background]]
dropdown-background: [function[colour],[background]] dropdown-background: [tf.colour[background]]
dropdown-border: [function[colour],[muted-foreground]] dropdown-border: [tf.colour[muted-foreground]]
dropdown-tab-background-selected: [function[colour],[background]] dropdown-tab-background-selected: [tf.colour[background]]
dropdown-tab-background: [tf.interpolate-colours[base-paper],[base-ink],[0.9]] dropdown-tab-background: [tf.interpolate-colours[base-paper],[base-ink],[0.9]]
dropzone-background: rgba(0,200,0,0.7) dropzone-background: rgba(0,200,0,0.7)
external-link-background-hover: inherit external-link-background-hover: inherit
external-link-background-visited: inherit external-link-background-visited: inherit
external-link-background: inherit external-link-background: inherit
external-link-foreground-hover: inherit external-link-foreground-hover: inherit
external-link-foreground-visited: [function[colour],[primary]] external-link-foreground-visited: [tf.colour[primary]]
external-link-foreground: [function[colour],[primary]] external-link-foreground: [tf.colour[primary]]
footnote-target-background: [tf.interpolate-colours[base-paper],[base-ink],[0.2]] footnote-target-background: [tf.interpolate-colours[base-paper],[base-ink],[0.2]]
foreground: [function[colour],[base-ink]] foreground: [tf.colour[base-ink]]
highlight-background: [tf.interpolate-colours[base-paper],[base-yellow],[0.5]] highlight-background: [tf.interpolate-colours[base-paper],[base-yellow],[0.5]]
highlight-foreground: [tf.interpolate-colours[base-yellow],[base-ink],[0.8]] highlight-foreground: [tf.interpolate-colours[base-yellow],[base-ink],[0.8]]
message-background: [tf.interpolate-colours[base-paper],[base-blue],[0.2]] message-background: [tf.interpolate-colours[base-paper],[base-blue],[0.2]]
message-border: [tf.interpolate-colours[base-blue],[base-ink],[0.5]] message-border: [tf.interpolate-colours[base-blue],[base-ink],[0.5]]
message-foreground: [tf.interpolate-colours[base-blue],[base-ink],[0.8]] message-foreground: [tf.interpolate-colours[base-blue],[base-ink],[0.8]]
modal-backdrop: [function[colour],[foreground]] modal-backdrop: [tf.colour[foreground]]
modal-background: [function[colour],[background]] modal-background: [tf.colour[background]]
modal-border: [function[colour],[]] modal-border: [tf.colour[]]
modal-footer-background: [function[colour],[]] modal-footer-background: [tf.colour[]]
modal-footer-border: [function[colour],[]] modal-footer-border: [tf.colour[]]
modal-header-border: [function[colour],[]] modal-header-border: [tf.colour[]]
muted-foreground: [tf.interpolate-colours[base-paper],[base-ink],[0.3]] muted-foreground: [tf.interpolate-colours[base-paper],[base-ink],[0.3]]
network-activity-foreground: [function[colour],[]] network-activity-foreground: [tf.colour[]]
notification-background: [function[colour],[base-tertiary]colour-set-oklch:l[0.9]] notification-background: [tf.colour[base-tertiary]colour-set-oklch:l[0.9]]
notification-border: [function[colour],[base-tertiary]colour-set-oklch:l[0.2]] notification-border: [tf.colour[base-tertiary]colour-set-oklch:l[0.2]]
page-background: [function[colour],[base-background]] page-background: [tf.colour[base-background]]
pre-background: [tf.interpolate-colours[base-paper],[base-tertiary],[0.1]] pre-background: [tf.interpolate-colours[base-paper],[base-tertiary],[0.1]]
pre-border: [tf.interpolate-colours[base-paper],[base-tertiary],[0.6]] pre-border: [tf.interpolate-colours[base-paper],[base-tertiary],[0.6]]
primary: [function[colour],[base-primary]] primary: [tf.colour[base-primary]]
selection-background: selection-background:
selection-foreground: selection-foreground:
select-tag-background: select-tag-background:
select-tag-foreground: select-tag-foreground:
sidebar-button-foreground: [function[colour],[foreground]] sidebar-button-foreground: [tf.colour[foreground]]
sidebar-controls-foreground-hover: [function[colour],[]] sidebar-controls-foreground-hover: [tf.colour[]]
sidebar-controls-foreground: [function[colour],[]] sidebar-controls-foreground: [tf.colour[]]
sidebar-foreground-shadow: rgba(255,255,255, 0.8) sidebar-foreground-shadow: rgba(255,255,255, 0.8)
sidebar-foreground: =[function[colour],[base-ink]] =[function[colour],[base-paper]] =[function[colour],[base-background]] +[colour-best-contrast:DeltaPhi[]] sidebar-foreground: =[tf.colour[base-ink]] =[tf.colour[base-paper]] =[tf.colour[base-background]] +[colour-best-contrast:DeltaPhi[]]
sidebar-muted-foreground-hover: [function[colour],[]] sidebar-muted-foreground-hover: [tf.colour[]]
sidebar-muted-foreground: [function[colour],[]] sidebar-muted-foreground: [tf.colour[]]
sidebar-tab-background-selected: [function[colour],[page-background]] sidebar-tab-background-selected: [tf.colour[page-background]]
sidebar-tab-background: [tf.interpolate-colours[page-background],[sidebar-tab-foreground],[0.5]] sidebar-tab-background: [tf.interpolate-colours[page-background],[sidebar-tab-foreground],[0.5]]
sidebar-tab-border-selected: [function[colour],[tab-border-selected]] sidebar-tab-border-selected: [tf.colour[tab-border-selected]]
sidebar-tab-border: [function[colour],[tab-border]] sidebar-tab-border: [tf.colour[tab-border]]
sidebar-tab-divider: [function[colour],[]] sidebar-tab-divider: [tf.colour[]]
sidebar-tab-foreground-selected: [function[colour],[tab-foreground]] sidebar-tab-foreground-selected: [tf.colour[tab-foreground]]
sidebar-tab-foreground: [function[colour],[tab-foreground]] sidebar-tab-foreground: [tf.colour[tab-foreground]]
sidebar-tiddler-link-foreground-hover: [function[colour],[]] sidebar-tiddler-link-foreground-hover: [tf.colour[]]
sidebar-tiddler-link-foreground: [function[colour],[]] sidebar-tiddler-link-foreground: [tf.colour[]]
site-title-foreground: [function[colour],[tiddler-title-foreground]] site-title-foreground: [tf.colour[tiddler-title-foreground]]
stability-stable: [function[colour],[]] stability-stable: [tf.colour[]]
stability-experimental: [function[colour],[]] stability-experimental: [tf.colour[]]
stability-deprecated: [function[colour],[]] stability-deprecated: [tf.colour[]]
stability-legacy: [function[colour],[]] stability-legacy: [tf.colour[]]
static-alert-foreground: [function[colour],[]] static-alert-foreground: [tf.colour[]]
tab-background-selected: [function[colour],[background]] tab-background-selected: [tf.colour[background]]
tab-background: [tf.interpolate-colours[base-paper],[base-ink],[0.2]] tab-background: [tf.interpolate-colours[base-paper],[base-ink],[0.2]]
tab-border-selected: [function[colour],[muted-foreground]] tab-border-selected: [tf.colour[muted-foreground]]
tab-border: [function[colour],[muted-foreground]] tab-border: [tf.colour[muted-foreground]]
tab-divider: [function[colour],[muted-foreground]] tab-divider: [tf.colour[muted-foreground]]
tab-foreground-selected: [function[colour],[tab-foreground]] tab-foreground-selected: [tf.colour[tab-foreground]]
tab-foreground: [function[colour],[foreground]] tab-foreground: [tf.colour[foreground]]
table-border: [function[colour],[foreground]] table-border: [tf.colour[foreground]]
table-footer-background: [tf.interpolate-colours[background],[foreground],[0.2]] table-footer-background: [tf.interpolate-colours[background],[foreground],[0.2]]
table-header-background: [tf.interpolate-colours[background],[foreground],[0.1]] table-header-background: [tf.interpolate-colours[background],[foreground],[0.1]]
tag-background: [tf.interpolate-colours[base-paper],[base-yellow],[0.9]] tag-background: [tf.interpolate-colours[base-paper],[base-yellow],[0.9]]
tag-foreground: [tf.interpolate-colours[base-yellow],[base-ink],[0.8]] tag-foreground: [tf.interpolate-colours[base-yellow],[base-ink],[0.8]]
testcase-accent-level-1: [function[colour],[]] testcase-accent-level-1: [tf.colour[]]
testcase-accent-level-2: [function[colour],[]] testcase-accent-level-2: [tf.colour[]]
testcase-accent-level-3: [function[colour],[]] testcase-accent-level-3: [tf.colour[]]
tiddler-background: [function[colour],[background]] tiddler-background: [tf.colour[background]]
tiddler-border: [tf.interpolate-colours[base-paper],[base-background],[0.5]] 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-hover: [tf.interpolate-colours[background],[foreground],[0.7]]
tiddler-controls-foreground-selected: [tf.interpolate-colours[background],[foreground],[0.9]] tiddler-controls-foreground-selected: [tf.interpolate-colours[background],[foreground],[0.9]]
tiddler-controls-foreground: [tf.interpolate-colours[background],[foreground],[0.5]] tiddler-controls-foreground: [tf.interpolate-colours[background],[foreground],[0.5]]
tiddler-editor-background: [function[colour],[]] tiddler-editor-background: [tf.colour[]]
tiddler-editor-border-image: [function[colour],[]] tiddler-editor-border-image: [tf.colour[]]
tiddler-editor-border: [function[colour],[]] tiddler-editor-border: [tf.colour[]]
tiddler-editor-fields-even: [function[colour],[]] tiddler-editor-fields-even: [tf.colour[]]
tiddler-editor-fields-odd: [function[colour],[]] tiddler-editor-fields-odd: [tf.colour[]]
tiddler-info-background: [function[colour],[]] tiddler-info-background: [tf.colour[]]
tiddler-info-border: [function[colour],[]] tiddler-info-border: [tf.colour[]]
tiddler-info-tab-background: [function[colour],[]] tiddler-info-tab-background: [tf.colour[]]
tiddler-link-background: [function[colour],[background]] tiddler-link-background: [tf.colour[background]]
tiddler-link-foreground: [function[colour],[primary]] tiddler-link-foreground: [tf.colour[primary]]
tiddler-subtitle-foreground: [tf.interpolate-colours[background],[foreground],[0.6]] tiddler-subtitle-foreground: [tf.interpolate-colours[background],[foreground],[0.6]]
tiddler-title-foreground: [tf.interpolate-colours[background],[foreground],[0.9]] tiddler-title-foreground: [tf.interpolate-colours[background],[foreground],[0.9]]
toolbar-new-button: toolbar-new-button:
@ -171,22 +171,22 @@ toolbar-close-button:
toolbar-delete-button: toolbar-delete-button:
toolbar-cancel-button: toolbar-cancel-button:
toolbar-done-button: toolbar-done-button:
untagged-background: [function[colour],[]] untagged-background: [tf.colour[]]
very-muted-foreground: [function[colour],[]] very-muted-foreground: [tf.colour[]]
wikilist-background: [function[colour],[]] wikilist-background: [tf.colour[]]
wikilist-item: [function[colour],[]] wikilist-item: [tf.colour[]]
wikilist-info: [function[colour],[]] wikilist-info: [tf.colour[]]
wikilist-title: [function[colour],[]] wikilist-title: [tf.colour[]]
wikilist-title-svg: [function[colour],[wikilist-title]] wikilist-title-svg: [tf.colour[wikilist-title]]
wikilist-url: [function[colour],[]] wikilist-url: [tf.colour[]]
wikilist-button-open: [function[colour],[]] wikilist-button-open: [tf.colour[]]
wikilist-button-open-hover: green wikilist-button-open-hover: green
wikilist-button-reveal: [function[colour],[]] wikilist-button-reveal: [tf.colour[]]
wikilist-button-reveal-hover: blue wikilist-button-reveal-hover: blue
wikilist-button-remove: [function[colour],[]] wikilist-button-remove: [tf.colour[]]
wikilist-button-remove-hover: red wikilist-button-remove-hover: red
wikilist-toolbar-background: [function[colour],[]] wikilist-toolbar-background: [tf.colour[]]
wikilist-toolbar-foreground: [function[colour],[]] wikilist-toolbar-foreground: [tf.colour[]]
wikilist-droplink-dragover: rgba(255,192,192,0.5) wikilist-droplink-dragover: rgba(255,192,192,0.5)
wikilist-button-background: [function[colour],[]] wikilist-button-background: [tf.colour[]]
wikilist-button-foreground: [function[colour],[]] wikilist-button-foreground: [tf.colour[]]

23
core/wiki/macros/CSS.tid
View File

@ -3,8 +3,9 @@ tags: $:/tags/Macro
\procedure actions-compile-palette-filtered(consolidatedPalette,outputPalette) \procedure actions-compile-palette-filtered(consolidatedPalette,outputPalette)
<!-- Note the join, needed to cope with palette entries containing spaces --> <!-- Note the join, needed to cope with palette entries containing spaces -->
\function colour(name) [<consolidatedPalette>getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :map[tf.colour-inner-transform-classic-palette-entry<currentTiddler>] :map[subfilter<currentTiddler>join[ ]] \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<currentTiddler>join[ ]]
\function color(name) [function[colour],<name>] \function colour(name) [tf.colour<name>]
\function color(name) [tf.colour<name>]
<!-- Make the colour function use the input palette --> <!-- Make the colour function use the input palette -->
<$list filter="[<consolidatedPalette>indexes[]sort[]]" variable="colour-name"> <$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>] }}}> <$let filter-text={{{ [<consolidatedPalette>getindex<colour-name>] :else[[$:/config/DefaultColourMappings/]addsuffix<colour-name>get[text]] :map[tf.colour-inner-transform-classic-palette-entry<currentTiddler>] }}}>
@ -85,16 +86,20 @@ tags: $:/tags/Macro
\procedure tv-palette-name() $:/temp/palette-colours \procedure tv-palette-name() $:/temp/palette-colours
\function colour(name) \function tf.colour(name)
[<tv-palette-name>getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] [<tv-palette-name>getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]]
\end tf.colour
\function colour(name)
[tf.colour<name>]
\end colour \end colour
\function color(name) \function color(name)
[function[colour],<name>] [tf.colour<name>]
\end color \end color
\procedure colour-function-prefix() \procedure colour-function-prefix()
[function[colour],[ [tf.colour[
\end colour-function-prefix \end colour-function-prefix
\procedure colour-function-suffix() \procedure colour-function-suffix()
@ -112,12 +117,16 @@ tags: $:/tags/Macro
\end colour-inner-get-palette-entry \end colour-inner-get-palette-entry
<!-- Note the join, needed to cope with palette entries containing spaces --> <!-- Note the join, needed to cope with palette entries containing spaces -->
\function colour(name) \function tf.colour(name)
[function[colour-inner-get-palette-entry],<name>,<paletteTitle>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :map[subfilter<currentTiddler>join[ ]] [function[colour-inner-get-palette-entry],<name>,<paletteTitle>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :map[subfilter<currentTiddler>join[ ]]
\end tf.colour
\function colour(name)
[tf.colour<name>]
\end colour \end colour
\function color(name) \function color(name)
[function[colour],<name>] [tf.colour<name>]
\end color \end color
<$let <$let