From 32ac67166a1d9a740abcbb3c6cc18d27625c811a Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@jermolene.com>
Date: Sun, 17 Nov 2024 14:45:52 +0000
Subject: [PATCH] Add alert preview

---
 core/ui/Palettes/Preview/Alert.tid | 17 +++++++++++++++++
 themes/tiddlywiki/vanilla/base.tid | 29 +++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 core/ui/Palettes/Preview/Alert.tid

diff --git a/core/ui/Palettes/Preview/Alert.tid b/core/ui/Palettes/Preview/Alert.tid
new file mode 100644
index 000000000..8c0328ee1
--- /dev/null
+++ b/core/ui/Palettes/Preview/Alert.tid
@@ -0,0 +1,17 @@
+title: $:/core/ui/Palettes/Preview/Alert
+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>
+		</$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/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index d27adce57..8022c6c72 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -2939,6 +2939,7 @@ input.tc-palette-manager-colour-input {
 
 .tc-palette-preview-thumbnail {
 	display: inline-block;
+	position: relative;
 	padding: 0.5em 0.5em 0 0.5em;
 	display: flex;
 	flex-direction: row;
@@ -2947,6 +2948,34 @@ input.tc-palette-manager-colour-input {
 	line-height: 1.2;
 }
 
+.tc-palette-preview-thumbnail-alert {
+	position: absolute;
+	top: 3px;
+	left: 3px;
+	width: 15em;
+	font-size: 2px;
+	border-radius: 2px;
+}
+
+.tc-palette-preview-thumbnail-alert-border {
+	border-width: 1px;
+	border-style: solid;
+	padding: 3px;
+	border-radius: 2px;
+}
+
+.tc-palette-preview-thumbnail-alert-subtitle {
+
+}
+
+.tc-palette-preview-thumbnail-alert-highlight {
+
+}
+
+.tc-palette-preview-thumbnail-alert-body {
+
+}
+
 .tc-palette-preview-thumbnail-story {
 	flex-grow: 2;
 }