mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-08-07 14:23:53 +00:00
Code Issues Releases Wiki Activity

Use interpolation to derive colours

Browse Source
This commit is contained in:
Jeremy Ruston 2025-01-02 17:10:29 +00:00
parent 6a06df79c4
commit b90b449ceb
2 changed files with 29 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
core/palette-templates/TwentyTwenties.tid
View File

@ -37,41 +37,41 @@ base-blue: #4385BE
base-purple: #8B7EC8 base-purple: #8B7EC8
base-magenta: #CE5D97 base-magenta: #CE5D97
# Darker variants # Darker variants
# base-red: #AF3029; # base-red: #AF3029
# base-orange: #BC5215; # base-orange: #BC5215
# base-yellow: #AD8301; # base-yellow: #AD8301
# base-green: #66800B; # base-green: #66800B
# base-cyan: #24837B; # base-cyan: #24837B
# base-blue: #205EA6; # base-blue: #205EA6
# base-purple: #5E409D; # base-purple: #5E409D
# base-magenta: #A02F6F; # base-magenta: #A02F6F
# Colour definitions # Colour definitions
alert-background: [function[colour],[base-secondary]] alert-background: [function[colour],[base-secondary]]
alert-border: [function[colour],[base-ink]] [function[colour],[alert-background]] +[colour-interpolate:oklch[0.6]] alert-border: [tf.interpolate-colours[base-ink],[alert-background],[0.6]]
alert-highlight: [function[colour],[base-ink]] [function[colour],[base-primary]] +[colour-interpolate:oklch[0.3]] alert-highlight: [tf.interpolate-colours[base-ink],[base-primary],[0.3]]
alert-muted-foreground: [function[colour],[base-ink]] [function[colour],[alert-background]] +[colour-interpolate:oklch[0.4]] alert-muted-foreground: [tf.interpolate-colours[base-ink],[alert-background],[0.4]]
?alert-contrast: [tf.check-colour-contrast[alert-background],[foreground],[45]] ?alert-contrast: [tf.check-colour-contrast[alert-background],[foreground],[45]]
background: [function[colour],[base-paper]] background: [function[colour],[base-paper]]
blockquote-bar: [function[colour],[muted-foreground]] blockquote-bar: [function[colour],[muted-foreground]]
button-background: button-background:
button-foreground: button-foreground:
button-border: button-border:
code-background: [function[colour],[base-tertiary]colour-set-oklch:l[0.9]] code-background: [tf.interpolate-colours[base-paper],[base-tertiary],[0.1]]
code-border: [function[colour],[base-tertiary]color-oklch:l[0.5]] code-border: [tf.interpolate-colours[base-paper],[base-tertiary],[0.6]]
code-foreground: [function[colour],[base-tertiary]colour-set-oklch:l[0.3]] code-foreground: [function[colour],[base-tertiary]]
?code-contrast: [tf.check-colour-contrast[code-background],[code-foreground],[45]] ?code-contrast: [tf.check-colour-contrast[code-background],[code-foreground],[45]]
diff-delete-background: [function[colour],[]] diff-delete-background: [function[colour],[base-red]]
diff-delete-foreground: [function[colour],[foreground]] diff-delete-foreground: [function[colour],[foreground]]
diff-equal-background: diff-equal-background:
diff-equal-foreground: [function[colour],[foreground]] diff-equal-foreground: [function[colour],[foreground]]
diff-insert-background: [function[colour],[]] diff-insert-background: [function[colour],[base-green]]
diff-insert-foreground: [function[colour],[foreground]] diff-insert-foreground: [function[colour],[foreground]]
diff-invisible-background: diff-invisible-background:
diff-invisible-foreground: [function[colour],[muted-foreground]] diff-invisible-foreground: [function[colour],[muted-foreground]]
dirty-indicator: [function[colour],[]] dirty-indicator: [function[colour],[base-tertiary]]
download-background: [function[colour],[]] download-background: [tf.interpolate-colours[base-paper],[base-green],[0.6]]
download-foreground: [function[colour],[background]] download-foreground: [tf.interpolate-colours[base-ink],[base-green],[1]]
dragger-background: [function[colour],[foreground]] dragger-background: [function[colour],[foreground]]
dragger-foreground: [function[colour],[background]] dragger-foreground: [function[colour],[background]]
dropdown-background: [function[colour],[background]] dropdown-background: [function[colour],[background]]
@ -104,8 +104,8 @@ network-activity-foreground: [function[colour],[]]
notification-background: [function[colour],[base-tertiary]colour-set-oklch:l[0.9]] notification-background: [function[colour],[base-tertiary]colour-set-oklch:l[0.9]]
notification-border: [function[colour],[base-tertiary]colour-set-oklch:l[0.2]] notification-border: [function[colour],[base-tertiary]colour-set-oklch:l[0.2]]
page-background: [function[colour],[base-background]] page-background: [function[colour],[base-background]]
pre-background: [function[colour],[base-tertiary]colour-set-oklch:l[0.98]] pre-background: [tf.interpolate-colours[base-paper],[base-tertiary],[0.1]]
pre-border: [function[colour],[base-tertiary]colour-set-oklch:l[0.3]] pre-border: [tf.interpolate-colours[base-paper],[base-tertiary],[0.6]]
primary: [function[colour],[base-primary]] primary: [function[colour],[base-primary]]
selection-background: selection-background:
selection-foreground: selection-foreground:
@ -149,10 +149,10 @@ testcase-accent-level-1: [function[colour],[]]
testcase-accent-level-2: [function[colour],[]] testcase-accent-level-2: [function[colour],[]]
testcase-accent-level-3: [function[colour],[]] testcase-accent-level-3: [function[colour],[]]
tiddler-background: [function[colour],[background]] tiddler-background: [function[colour],[background]]
tiddler-border: [function[colour],[base-paper]] [function[colour],[base-background]] +[colour-interpolate:oklch[0.5]] tiddler-border: [tf.interpolate-colours,[base-paper],[base-background],[0.5]]
tiddler-controls-foreground-hover: [function[colour],[background]] [function[colour],[foreground]] +[colour-interpolate:oklch[0.7]] tiddler-controls-foreground-hover: [tf.interpolate-colours,[background],[foreground],[0.7]]
tiddler-controls-foreground-selected: [function[colour],[background]] [function[colour],[foreground]] +[colour-interpolate:oklch[0.9]] tiddler-controls-foreground-selected: [tf.interpolate-colours,[background],[foreground],[0.9]]
tiddler-controls-foreground: [function[colour],[background]] [function[colour],[foreground]] +[colour-interpolate:oklch[0.5]] tiddler-controls-foreground: [tf.interpolate-colours,[background],[foreground],[0.5]]
tiddler-editor-background: [function[colour],[]] tiddler-editor-background: [function[colour],[]]
tiddler-editor-border-image: [function[colour],[]] tiddler-editor-border-image: [function[colour],[]]
tiddler-editor-border: [function[colour],[]] tiddler-editor-border: [function[colour],[]]

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

@ -87,6 +87,10 @@ tags: $:/tags/Macro
[function[tf.check-colour-contrast-subfunction]compare:number:gt<threshold>then[ok]] :else[function[tf.check-colour-contrast-subfunction]addsuffix[: ]addsuffix<paletteEntryA>addsuffix[/]addsuffix<paletteEntryB>addsuffix[ contrast is too low]] [function[tf.check-colour-contrast-subfunction]compare:number:gt<threshold>then[ok]] :else[function[tf.check-colour-contrast-subfunction]addsuffix[: ]addsuffix<paletteEntryA>addsuffix[/]addsuffix<paletteEntryB>addsuffix[ contrast is too low]]
\end tf.check-colour-contrast \end tf.check-colour-contrast
\function tf.interpolate-colours(paletteEntryA,paletteEntryB,weight)
[function[colour],<paletteEntryA>] [function[colour],<paletteEntryB>] +[colour-interpolate:oklch<weight>]
\end tf.interpolate-colours
\define box-shadow(shadow) \define box-shadow(shadow)
`` ``
-webkit-box-shadow: $shadow$; -webkit-box-shadow: $shadow$;