Added Prism Callouts Snippet and a minor version update for the Prism…

… Mark Highlight System snippet
damiankorcz · Mar 22, 2024 · fec6b07 · fec6b07
1 parent 5f7ea91
commit fec6b07
Show file tree

Hide file tree

Showing 11 changed files with 473 additions and 7 deletions.
diff --git a/.github/workflows/buildTheme&Snippets.yml b/.github/workflows/buildTheme&Snippets.yml
@@ -45,8 +45,11 @@ jobs:
     - name: Run Theme Build script
       run: pnpm run buildTheme --if-present
 
-    - name: Run Snippet Build script
+    - name: Run Mark Highlight System Snippet Build script
       run: pnpm run buildSnipMHS --if-present
+
+    - name: Run Callout Snippet Build script
+      run: pnpm run buildSnipC --if-present
 
     - name: Pushing the Built Files
       uses: stefanzweifel/git-auto-commit-action@v4

diff --git a/Prism.code-workspace b/Prism.code-workspace
@@ -66,6 +66,24 @@
 					"kind": "build",
 					"isDefault": true
 				}
+			},
+			{
+				"label": "Prism - Dev C Snippet",
+				"type": "shell",
+				"command": "npm run devSnipC",
+				"group": {
+					"kind": "build",
+					"isDefault": true
+				}
+			},
+			{
+				"label": "Prism - Build C Snippet",
+				"type": "shell",
+				"command": "npm run buildSnipC",
+				"group": {
+					"kind": "build",
+					"isDefault": true
+				}
 			}
 		]
 	}

diff --git a/build/buildSnipC.config.mjs b/build/buildSnipC.config.mjs
@@ -0,0 +1,12 @@
+import fs from "fs";
+import sass from "sass";
+
+const inputPath = `./src/snippets/Prism Callouts/C_index.scss`;
+const outputPath = `./src/snippets/Prism Callouts.css`;
+
+const result = sass.compile(inputPath, {
+    charset: false,
+    sourceMap: false
+});
+
+fs.writeFile(outputPath, result.css, () => true);
diff --git a/package.json b/package.json
@@ -7,9 +7,11 @@
   "homepage": "https://github.com/damiankorcz/Obsidian-Prism",
   "scripts": {
     "devTheme": "sass --watch --no-charset --no-source-map --color \"src/scss/index.scss\" \"D:/Syncthing/Obsidian/Theme Test/.obsidian/themes/PrismDev.css\"",
-    "devSnipMHS": "sass --watch --no-charset --no-source-map --color \"src/snippets/Prism Mark Highlight System/MHS_index.scss\" \"src/snippets/Prism Mark Highlight System.css\"",
+    "devSnipMHS": "sass --watch --no-charset --no-source-map --color \"src/snippets/Prism Mark Highlight System/MHS_index.scss\" \"D:/Syncthing/Obsidian/Theme Test/.obsidian/snippets/Prism Mark Highlight System.css\"",
+    "devSnipC": "sass --watch --no-charset --no-source-map --color \"src/snippets/Prism Callouts/C_index.scss\" \"D:/Syncthing/Obsidian/Theme Test/.obsidian/snippets/Prism Callouts.css\"",
     "buildTheme": "node ./build/buildTheme.config.mjs",
-    "buildSnipMHS": "node ./build/buildSnipMHS.config.mjs"
+    "buildSnipMHS": "node ./build/buildSnipMHS.config.mjs",
+    "buildSnipC": "node ./build/buildSnipC.config.mjs"
   },
   "devDependencies": {
     "sass": "^1.70.0",

diff --git a/src/snippets/Prism Callouts/C_code.scss b/src/snippets/Prism Callouts/C_code.scss
@@ -0,0 +1,285 @@
+body:not(.prism-theme) {
+	.callout {
+		background-color: unset;
+		border: unset;
+
+		.callout-title {
+			position: relative;
+			z-index: 5;
+			gap: unset;
+			align-items: center;
+			min-height: 36px;
+			border: 2px solid;
+			border-radius: var(--callout-radius);
+
+			&:empty + .callout-content {
+				padding: var(--size-4-1) var(--size-4-3);
+				border-top-style: solid;
+				border-top-width: 1px;
+				border-radius: var(--callout-radius);
+			}
+		}
+
+		.callout-title-inner {
+			padding: var(--size-4-1) 0;
+			margin: 0 var(--size-4-1);
+		}
+
+		.callout-icon {
+			align-self: unset;
+			margin: 0 var(--size-4-1) 0 var(--size-4-2);
+			border-radius: var(--callout-radius);
+		}
+
+		.callout-fold {
+			display: flex;
+			align-self: unset;
+			margin-top: unset;
+			margin-left: auto;
+		}
+
+		.callout-content {
+			padding: var(--size-4-5) var(--size-4-3) var(--size-4-1) var(--size-4-3);
+			margin-top: -16px;
+			border-right: 1px solid;
+			border-bottom: 1px solid;
+			border-left: 1px solid;
+			border-bottom-right-radius: var(--callout-radius);
+			border-bottom-left-radius: var(--callout-radius);
+		}
+
+		// Type 1
+		&[data-callout="note"] > {
+			.callout-title {
+				color: var(--color-grey-text);
+				background-color: var(--color-grey-base);
+				border-color: var(--color-grey-tint);
+
+				.callout-icon .svg-icon {
+					color: var(--color-grey-text);
+				}
+			}
+
+			.callout-content {
+				background-color: hsla(var(--color-grey-base-hsl), var(--callout-background-alpha));
+				border-color: var(--color-grey-tint);
+			}
+		}
+
+		// Type 2
+		&:is([data-callout="abstract"], [data-callout="summary"], [data-callout="tldr"]) > {
+			.callout-title {
+				color: var(--color-cyan-text);
+				background-color: var(--color-cyan-base);
+				border-color: var(--color-cyan-tint);
+
+				.callout-icon .svg-icon {
+					color: var(--color-cyan-text);
+				}
+			}
+
+			.callout-content {
+				background-color: hsla(var(--color-cyan-base-hsl), var(--callout-background-alpha));
+				border-color: var(--color-cyan-tint);
+			}
+		}
+
+		// Type 3
+		&:is([data-callout="info"], [data-callout="todo"]) > {
+			.callout-title {
+				color: var(--color-blue-text);
+				background-color: var(--color-blue-base);
+				border-color: var(--color-blue-tint);
+
+				.callout-icon .svg-icon {
+					color: var(--color-blue-text);
+				}
+			}
+
+			.callout-content {
+				background-color: hsla(var(--color-blue-base-hsl), var(--callout-background-alpha));
+				border-color: var(--color-blue-tint);
+			}
+		}
+
+		// Type 4
+		&:is([data-callout="tip"], [data-callout="hint"], [data-callout="important"]) > {
+			.callout-title {
+				color: var(--color-mint-text);
+				background-color: var(--color-mint-base);
+				border-color: var(--color-mint-tint);
+
+				.callout-icon .svg-icon {
+					color: var(--color-mint-text);
+				}
+			}
+
+			.callout-content {
+				background-color: hsla(var(--color-mint-base-hsl), var(--callout-background-alpha));
+				border-color: var(--color-mint-tint);
+			}
+		}
+
+		// Type 5
+		&:is([data-callout="success"], [data-callout="check"], [data-callout="done"]) > {
+			.callout-title {
+				color: var(--color-green-text);
+				background-color: var(--color-green-base);
+				border-color: var(--color-green-tint);
+
+				.callout-icon .svg-icon {
+					color: var(--color-green-text);
+				}
+			}
+
+			.callout-content {
+				background-color: hsla(var(--color-green-base-hsl), var(--callout-background-alpha));
+				border-color: var(--color-green-tint);
+			}
+		}
+
+		// Type 6
+		&:is([data-callout="question"], [data-callout="help"], [data-callout="faq"]) > {
+			.callout-title {
+				color: var(--color-yellow-text);
+				background-color: var(--color-yellow-base);
+				border-color: var(--color-yellow-tint);
+
+				.callout-icon .svg-icon {
+					color: var(--color-yellow-text);
+				}
+			}
+
+			.callout-content {
+				background-color: hsla(var(--color-yellow-base-hsl), var(--callout-background-alpha));
+				border-color: var(--color-yellow-tint);
+			}
+		}
+
+		// Type 7
+		&:is([data-callout="warning"], [data-callout="caution"], [data-callout="attention"]) > {
+			.callout-title {
+				color: var(--color-orange-text);
+				background-color: var(--color-orange-base);
+				border-color: var(--color-orange-tint);
+
+				.callout-icon .svg-icon {
+					color: var(--color-orange-text);
+				}
+			}
+
+			.callout-content {
+				background-color: hsla(var(--color-orange-base-hsl), var(--callout-background-alpha));
+				border-color: var(--color-orange-tint);
+			}
+		}
+
+		// Type 8
+		&:is([data-callout="failure"], [data-callout="fail"], [data-callout="missing"]) > {
+			.callout-title {
+				color: var(--color-red-text);
+				background-color: var(--color-red-base);
+				border-color: var(--color-red-tint);
+
+				.callout-icon .svg-icon {
+					color: var(--color-red-text);
+				}
+			}
+
+			.callout-content {
+				background-color: hsla(var(--color-red-base-hsl), var(--callout-background-alpha));
+				border-color: var(--color-red-tint);
+			}
+		}
+
+		// Type 9
+		&:is([data-callout="danger"], [data-callout="error"]) > {
+			.callout-title {
+				color: var(--color-red-text);
+				background-color: var(--color-red-base);
+				border-color: var(--color-red-tint);
+
+				.callout-icon .svg-icon {
+					color: var(--color-red-text);
+				}
+			}
+
+			.callout-content {
+				background-color: hsla(var(--color-red-base-hsl), var(--callout-background-alpha));
+				border-color: var(--color-red-tint);
+			}
+		}
+
+		// Type 10
+		&[data-callout="bug"] > {
+			.callout-title {
+				color: var(--color-pink-text);
+				background-color: var(--color-pink-base);
+				border-color: var(--color-pink-tint);
+
+				.callout-icon .svg-icon {
+					color: var(--color-pink-text);
+				}
+			}
+
+			.callout-content {
+				background-color: hsla(var(--color-pink-base-hsl), var(--callout-background-alpha));
+				border-color: var(--color-pink-tint);
+			}
+		}
+
+		// Type 11
+		&[data-callout="example"] > {
+			.callout-title {
+				color: var(--color-purple-text);
+				background-color: var(--color-purple-base);
+				border-color: var(--color-purple-tint);
+
+				.callout-icon .svg-icon {
+					color: var(--color-purple-text);
+				}
+			}
+
+			.callout-content {
+				background-color: hsla(var(--color-purple-base-hsl), var(--callout-background-alpha));
+				border-color: var(--color-purple-tint);
+			}
+		}
+
+		// Type 12
+		&:is([data-callout="quote"], [data-callout="cite"]) > {
+			.callout-title {
+				color: var(--color-grey-text);
+				background-color: var(--color-grey-base);
+				border-color: var(--color-grey-tint);
+
+				.callout-icon .svg-icon {
+					color: var(--color-grey-text);
+				}
+			}
+
+			.callout-content {
+				background-color: hsla(var(--color-grey-base-hsl), var(--callout-background-alpha));
+				border-color: var(--color-grey-tint);
+			}
+		}
+	}
+
+	// Specific styling for the unconventional use of the callout in Release Notes
+	.release-notes-view .callout[data-callout] > {
+		.callout-title {
+			color: var(--color-grey-text);
+			background-color: var(--color-grey-base);
+			border-color: var(--color-grey-tint);
+
+			.callout-icon .svg-icon {
+				color: var(--color-grey-text);
+			}
+		}
+
+		.callout-content {
+			background-color: hsla(var(--color-grey-base-hsl), var(--callout-background-alpha));
+			border-color: var(--color-grey-tint);
+		}
+	}
+}
diff --git a/src/snippets/Prism Callouts/C_index.scss b/src/snippets/Prism Callouts/C_index.scss
@@ -0,0 +1,4 @@
+@use "./C_license.scss";
+@use "./C_styleSettings.scss";
+@use "./C_variables.scss";
+@use "./C_code.scss";
diff --git a/src/snippets/Prism Callouts/C_license.scss b/src/snippets/Prism Callouts/C_license.scss
@@ -0,0 +1,12 @@
+/*
+    Prism Callouts for Obsidian.md
+    > Snippet of an feature extracted from the Prism Theme for Obsidian.md
+
+    Version: 1.0.0
+
+    Documentation: https://github.com/damiankorcz/Prism-Theme/wiki/Callout-Customisation
+
+    Source: https://github.com/damiankorcz/Obsidian-Prism
+    Distributed under the MIT License. See https://github.com/damiankorcz/Obsidian-Prism/blob/main/LICENSE for more information.
+    Copyright (c) 2022-2024 Damian Korcz <https://github.com/damiankorcz>
+*/
diff --git a/src/snippets/Prism Callouts/C_styleSettings.scss b/src/snippets/Prism Callouts/C_styleSettings.scss
@@ -0,0 +1,10 @@
+/* @settings
+name: Prism Callouts 1.0.0
+id: obsidian-prism-callouts
+settings:
+    -
+        id: prism-callout
+        title: Prism Callout Class
+        type: class-toggle
+        default: true
+*/