Change styles to use palette

Author: CrossEye

tiddlers/$__supp-info_notes_content.json

@@ -1,10 +1,10 @@
 {
-  "HelloThere": [
-    "My very first note.\n\nLook ma, multiple lines!",
-    "Another note, just to prove I can.",
-    "Dummy text"
-  ],
-  "Quick Start": [
-    "And a note on another tiddler, with a [[link|Hard and Soft Links]] just for demo."
-  ]
+    "HelloThere": [
+        "My very first note.\n\nLook ma, multiple lines!",
+        "Another note, just to prove I can.",
+        "Dummy text"
+    ],
+    "Quick Start": [
+        "And a note on another tiddler, with a [[link|Hard and Soft Links]] just for demo."
+    ]
 }

tiddlers/$__supp-info_notes_content.json.meta

@@ -1,6 +1,6 @@
 caption: Supp Notes Content
 created: 20251107151758434
-modified: 20251117224811306
+modified: 20251118124741220
 tags: $:/tags/SupplementaryInfo
 title: $:/supp-info/notes/content
 type: application/json

tiddlers/$__supp-info_notes_styles_main.css

@@ -0,0 +1,38 @@
+caption: Supp Notes Stylesheet
+created: 20251115161726500
+modified: 20251118125608558
+tags: $:/tags/Stylesheet
+title: $:/supp-info/notes/styles/main
+type: text/vnd.tiddlywiki
+
+/* TODO: find reasonably pleasing color entries so that contrasts work properly in all palettes. 
+    See for instance Contrast (Light) or Cupertino Dark for failures. 
+    The white and black below need to change.  But to what? */
+.supp-notes {
+  background-color: <<color message-background>>;
+  margin-top: 3em;
+  margin-bottom: -2em;
+  padding: 0;
+  .controls {
+    display: inline-block;
+    margin-left: 1em;
+    svg {width: 1em; height: 1em; vertical-align: middle;}
+  }
+  .summary, .summary  button.toggle {background-color: <<color message-foreground>>; color: white; padding: .5em; font-weight: bold;}
+  .note-row {
+    display: flex; 
+    flex-direction: row; 
+    gap: .75em;
+    align-items: center;
+    padding: .5em;
+    color: black;
+    &button {
+      flex: 0 1 auto;
+      width: 2em;
+      svg {width: 1.5em; height: 1em; vertical-align: middle;}
+    }
+    textarea {width: 100%;}
+    div.note {flex: 1 0 auto; min-height: 2em;}
+  }
+  .note {border: 1px solid #ccc; padding: .25em .5em; margin-top: .5em; &>:first-child {margin-top: 0;}}
+}