From e40b83f141e225178487e5386f08ec7b39d3818d Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@jermolene.com>
Date: Thu, 19 Oct 2023 08:59:07 +0100
Subject: [PATCH] More custom colours

---
 .../tour/config-DefaultColourMappings.multids |  7 ++++++
 plugins/tiddlywiki/tour/styles.tid            | 22 +++++++++++++++++++
 plugins/tiddlywiki/tour/tour-panel.tid        |  6 ++---
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/plugins/tiddlywiki/tour/config-DefaultColourMappings.multids b/plugins/tiddlywiki/tour/config-DefaultColourMappings.multids
index 0026b4382..d753333f9 100644
--- a/plugins/tiddlywiki/tour/config-DefaultColourMappings.multids
+++ b/plugins/tiddlywiki/tour/config-DefaultColourMappings.multids
@@ -16,9 +16,16 @@ tour-chooser-item-start-hover-background: <<colour primary>>
 tour-chooser-item-start-hover-foreground: <<colour background>>
 tour-fullscreen-background: <<colour page-background>>
 tour-fullscreen-controls-foreground: <<colour muted-foreground>>
+tour-navigation-buttons-back-background: red
+tour-navigation-buttons-back-foreground: white
+tour-navigation-buttons-hint-background: purple
+tour-navigation-buttons-hint-foreground: white
 tour-navigation-buttons-hover-background: <<colour foreground>>
 tour-navigation-buttons-hover-foreground: <<colour background>>
+tour-navigation-buttons-next-background: purple
+tour-navigation-buttons-next-foreground: white
 tour-overlay-background: #cbfff8
 tour-overlay-border: #228877
+tour-step-heading-background: none
 tour-step-task-background: <<colour download-background>>
 tour-step-task-foreground: <<colour download-foreground>>
diff --git a/plugins/tiddlywiki/tour/styles.tid b/plugins/tiddlywiki/tour/styles.tid
index 8136dc701..d71384ad2 100644
--- a/plugins/tiddlywiki/tour/styles.tid
+++ b/plugins/tiddlywiki/tour/styles.tid
@@ -25,6 +25,21 @@ tags: $:/tags/Stylesheet
 	margin: 0 1em 0 0;
 }
 
+.tc-tour-panel-navigation .tc-btn-big-green.tc-tour-panel-navigation-back {
+	background: <<colour tour-navigation-buttons-back-background>>;
+	color: <<colour tour-navigation-buttons-back-foreground>>;
+}
+
+.tc-tour-panel-navigation .tc-btn-big-green.tc-tour-panel-navigation-next {
+	background: <<colour tour-navigation-buttons-next-background>>;
+	color: <<colour tour-navigation-buttons-next-foreground>>;
+}
+
+.tc-tour-panel-navigation .tc-btn-big-green.tc-tour-panel-navigation-hint {
+	background: <<colour tour-navigation-buttons-hint-background>>;
+	color: <<colour tour-navigation-buttons-hint-foreground>>;
+}
+
 .tc-tour-panel-navigation .tc-btn-big-green:hover {
 	color: <<colour tour-navigation-buttons-hover-foreground>>;
 	background: <<colour tour-navigation-buttons-hover-background>>;
@@ -98,6 +113,13 @@ tags: $:/tags/Stylesheet
 	color: <<colour tour-chooser-item-start-hover-foreground>>;
 }
 
+.tc-tour-panel-fullscreen h1 {
+	background: <<colour tour-step-heading-background>>;
+	padding: 0.25em;
+	margin: -0.25em;
+	border-radius: 4px;
+}
+
 .tc-tour-panel-fullscreen .tc-tour-panel-controls {
 	/* display: none; */
 	position: fixed;
diff --git a/plugins/tiddlywiki/tour/tour-panel.tid b/plugins/tiddlywiki/tour/tour-panel.tid
index f53bc5bad..413139fb2 100644
--- a/plugins/tiddlywiki/tour/tour-panel.tid
+++ b/plugins/tiddlywiki/tour/tour-panel.tid
@@ -7,13 +7,13 @@ tags: $:/tags/PageTemplate
 \procedure tv-action-refresh-policy() always
 <div class="tc-tour-panel-navigation">
 	<%if [function[tour-is-not-first-step]] %>
-		<$button class="tc-btn-big-green" style="background-color: red;">
+		<$button class="tc-btn-big-green tc-tour-panel-navigation-back">
 			<<tour-previous-step>>
 			back
 		</$button>
 	<%endif%>
 	<%if [function[tour-is-not-last-step]] %>
-		<$button class="tc-btn-big-green" style="background-color: purple;">
+		<$button class="tc-btn-big-green tc-tour-panel-navigation-next">
 			<<tour-next-step>>
 			next
 		</$button>
@@ -38,7 +38,7 @@ tags: $:/tags/PageTemplate
 <$transclude tiddler=<<currentTourStep>> mode="block"/>
 <%if [{$:/state/tour/step}has[selector]] %>
 	<div class="tc-tour-panel-navigation">
-		<$button class="tc-btn-big-green" style="background-color: red;">
+		<$button class="tc-btn-big-green tc-tour-panel-navigation-hint">
 			<$action-sendmessage $message="tm-spotlight-element" selector={{{ [{$:/state/tour/step}get[selector]] }}} selector-fallback-1={{{ [{$:/state/tour/step}get[selector-fallback-1]] }}} selector-fallback-2={{{ [{$:/state/tour/step}get[selector-fallback-2]] }}}/>
 			show me a hint
 		</$button>