From b0828cc099441af0a3e1c1afe5dfafc497907cd3 Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@jermolene.com>
Date: Sun, 17 Nov 2024 16:10:57 +0000
Subject: [PATCH] Add notification preview

---
 core/ui/Palettes/Preview/Alert.tid        | 16 +++++++++-------
 core/ui/Palettes/Preview/Notification.tid | 11 +++++++++++
 core/wiki/tags/PreviewPage.tid            |  2 +-
 themes/tiddlywiki/vanilla/base.tid        | 22 +++++++++++++---------
 4 files changed, 34 insertions(+), 17 deletions(-)
 create mode 100644 core/ui/Palettes/Preview/Notification.tid

diff --git a/core/ui/Palettes/Preview/Alert.tid b/core/ui/Palettes/Preview/Alert.tid
index 8c0328ee1..73506901b 100644
--- a/core/ui/Palettes/Preview/Alert.tid
+++ b/core/ui/Palettes/Preview/Alert.tid
@@ -4,14 +4,16 @@ 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 class="tc-palette-preview-thumbnail-alert-subtitle">
-			Lorem Ipsum
-			<$colour.div class="tc-palette-preview-thumbnail-alert-highlight">
-				(Count: 1)
+		<$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>
+			</$colour.div>
+			<$colour.div class="tc-palette-preview-thumbnail-alert-body">
+				Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Sed Do Eiusmod Tempor Incididunt.
 			</$colour.div>
-		</$colour.div>
-		<$colour.div class="tc-palette-preview-thumbnail-alert-body">
-			Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Sed Do Eiusmod Tempor Incididunt.
 		</$colour.div>
 	</$colour.div>
 </$colour.div>
\ No newline at end of file
diff --git a/core/ui/Palettes/Preview/Notification.tid b/core/ui/Palettes/Preview/Notification.tid
new file mode 100644
index 000000000..ce8a126cc
--- /dev/null
+++ b/core/ui/Palettes/Preview/Notification.tid
@@ -0,0 +1,11 @@
+title: $:/core/ui/Palettes/Preview/Notification
+tags: $:/tags/Preview/Page
+
+\whitespace trim
+<$colour.div class="tc-palette-preview-thumbnail-notification" styleName="background-color" styleColour="notification-background">
+	<$colour.div class="tc-palette-preview-thumbnail-notification-border" styleName="border-color" styleColour="notification-border">
+		<$colour.div class="tc-palette-preview-thumbnail-notification-body" styleName="color" styleColour="foreground">
+			Lorem Ipsum Dolor Sit Amet Consectetur
+		</$colour.div>
+	</$colour.div>
+</$colour.div>
\ No newline at end of file
diff --git a/core/wiki/tags/PreviewPage.tid b/core/wiki/tags/PreviewPage.tid
index 6d8c30aa6..51b2e68f4 100644
--- a/core/wiki/tags/PreviewPage.tid
+++ b/core/wiki/tags/PreviewPage.tid
@@ -1,2 +1,2 @@
 title: $:/tags/Preview/Page
-list: $:/core/ui/Palettes/Preview/Alert $:/core/ui/Palettes/Preview/Story $:/core/ui/Palettes/Preview/Sidebar
+list: $:/core/ui/Palettes/Preview/Alert $:/core/ui/Palettes/Preview/Notification $:/core/ui/Palettes/Preview/Story $:/core/ui/Palettes/Preview/Sidebar
diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index 8022c6c72..1a7ddd402 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -2952,7 +2952,7 @@ input.tc-palette-manager-colour-input {
 	position: absolute;
 	top: 3px;
 	left: 3px;
-	width: 15em;
+	width: 35em;
 	font-size: 2px;
 	border-radius: 2px;
 }
@@ -2964,16 +2964,20 @@ input.tc-palette-manager-colour-input {
 	border-radius: 2px;
 }
 
-.tc-palette-preview-thumbnail-alert-subtitle {
-
+.tc-palette-preview-thumbnail-notification {
+	position: absolute;
+	right: 3px;
+	top: 3px;
+	width: 25em;
+	font-size: 2px;
+	border-radius: 2px;
 }
 
-.tc-palette-preview-thumbnail-alert-highlight {
-
-}
-
-.tc-palette-preview-thumbnail-alert-body {
-
+.tc-palette-preview-thumbnail-notification-border {
+	border-width: 1px;
+	border-style: solid;
+	padding: 3px;
+	border-radius: 2px;
 }
 
 .tc-palette-preview-thumbnail-story {