✨ Wrap tag style in Style Setting

ebullient · Dec 5, 2022 · 51b4b2a · 51b4b2a
1 parent ad08ccb
commit 51b4b2a
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 58 deletions.
diff --git a/src/ebullientworks.scss b/src/ebullientworks.scss
@@ -22,6 +22,12 @@ settings:
     description: Set this to true if you are going to use your own task snippet
     type: class-toggle
     default: false
+  -
+    id: ebullientworks-nix-tags
+    title: Suppress/Remove this theme's tag styles
+    description: Set this to true if you are going to use your own tag snippet
+    type: class-toggle
+    default: false
   -
     id: ebullientworks-reverse-view-header-actions
     title: View header actions to the left

diff --git a/src/fragments/04-headings-hr-tags.scss b/src/fragments/04-headings-hr-tags.scss
@@ -26,9 +26,6 @@ body {
   --h4-weight: 500;
   --h5-weight: 500;
   --h6-weight: 500;
-  --tag-background: transparent;
-  --tag-background-hover: transparent;
-  --tag-padding-x: 0;
 }
 .theme-dark {
   --h1-color: var(--yellow-2);
@@ -37,9 +34,6 @@ body {
   --h4-color: var(--blue-3);
   --h5-color: var(--purple-3);
   --h6-color: var(--pink-3);
-
-  --tag-color: var(--color-accent-2);
-  --tag-color-hover: var(--tag-3);
 }
 .theme-dark .print,
 .theme-light {
@@ -49,21 +43,7 @@ body {
   --h4-color: var(--blue-4);
   --h5-color: var(--purple-4);
   --h6-color: var(--pink-4);
-
-  --tag-color: var(--color-accent);
-  --tag-color-hover: var(--tag-4);
 }
-
-a.tag,
-.editor .cl-hashtag,
-.markdown-source-view.mod-cm6 .cm-hashtag,
-.cm-s-obsidian .cm-formatting.cm-hashtag,
-.cm-s-obsidian .cm-quote.cm-hashtag,
-.cm-s-obsidian .cm-hmd-codeblock.cm-hashtag {
-  font-family: var(--ebw-font-tags);
-  color: var(--tag-color);
-}
-
 .cm-header-1 {
   --heading-formatting: var(--h1-color)
 }
@@ -119,21 +99,6 @@ h1,
     font-variant-caps: normal;
     font-size: 75% !important;
   }
-
-  h1 a.tag,
-  h2 a.tag,
-  h3 a.tag,
-  h4 a.tag,
-  h5 a.tag,
-  h6 a.tag {
-    font-variant-caps: normal;
-    font-weight: var(--font-extralight);
-    font-size: 75% !important;
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    border-radius: unset;
-  }
 }
 
 .cm-s-obsidian {
@@ -143,45 +108,96 @@ h1,
     font-variant-caps: normal;
   }
 
-  .cm-header.cm-hashtag {
-    font-weight: var(--font-extralight);
-    font-variant-caps: normal;
-    padding: 0;
-    background-color: transparent;
-    border: none;
-    border-radius: unset;
+  .cm-line:not(.HyperMD-codeblock) .cm-header.cm-inline-code {
+    font-size: 65% !important;
   }
 
-  .cm-line:not(.HyperMD-codeblock) {
-    .cm-header.cm-inline-code {
-      font-size: 65% !important;
-    }
-    .cm-header.cm-hashtag {
-      font-size: 65% !important;
-    }
-  }
-
-  .cm-header-1.cm-hmd-codeblock:not(.cm-inline-code):not(.cm-hashtag) {
+  .cm-header-1.cm-hmd-codeblock:not(.cm-inline-code) {
     color: var(--h1-color);
   }
-  .cm-header-2.cm-hmd-codeblock:not(.cm-inline-code):not(.cm-hashtag) {
+  .cm-header-2.cm-hmd-codeblock:not(.cm-inline-code) {
     color: var(--h2-color);
   }
-  .cm-header-3.cm-hmd-codeblock:not(.cm-inline-code):not(.cm-hashtag) {
+  .cm-header-3.cm-hmd-codeblock:not(.cm-inline-code) {
     color: var(--h3-color);
   }
-  .cm-header-4.cm-hmd-codeblock:not(.cm-inline-code):not(.cm-hashtag) {
+  .cm-header-4.cm-hmd-codeblock:not(.cm-inline-code) {
     color: var(--h4-color);
   }
-  .cm-header-5.cm-hmd-codeblock:not(.cm-inline-code):not(.cm-hashtag) {
+  .cm-header-5.cm-hmd-codeblock:not(.cm-inline-code) {
     color: var(--h5-color);
   }
-  .cm-header-6.cm-hmd-codeblock:not(.cm-inline-code):not(.cm-hashtag) {
+  .cm-header-6.cm-hmd-codeblock:not(.cm-inline-code) {
     color: var(--h6-color);
   }
 }
 
-// HR tags
+/* Tag formatting */
+body:not(.ebullientworks-nix-tags) {
+  --tag-background: transparent;
+  --tag-background-hover: transparent;
+  --tag-padding-x: 0;
+
+  &.theme-dark {
+    --tag-color: var(--color-accent-2);
+    --tag-color-hover: var(--tag-3);
+  }
+  &.theme-dark .print,
+  &.theme-light {
+    --tag-color: var(--color-accent);
+    --tag-color-hover: var(--tag-4);
+  }
+
+  a.tag,
+  .editor .cl-hashtag,
+  .markdown-source-view.mod-cm6 .cm-hashtag,
+  .cm-s-obsidian .cm-formatting.cm-hashtag,
+  .cm-s-obsidian .cm-quote.cm-hashtag,
+  .cm-s-obsidian .cm-hmd-codeblock.cm-hashtag {
+    font-family: var(--ebw-font-tags);
+    color: var(--tag-color);
+  }
+
+  h1 a.tag,
+  h2 a.tag,
+  h3 a.tag,
+  h4 a.tag,
+  h5 a.tag,
+  h6 a.tag {
+    font-variant-caps: normal;
+    font-weight: var(--font-extralight);
+    font-size: 75% !important;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    border-radius: unset;
+  }
+
+  .cm-s-obsidian {
+    .cm-header.cm-hashtag {
+      font-weight: var(--font-extralight);
+      font-variant-caps: normal;
+      padding: 0;
+      background-color: transparent;
+      border: none;
+      border-radius: unset;
+    }
+
+    .cm-line:not(.HyperMD-codeblock) .cm-header.cm-hashtag {
+      font-size: 65% !important;
+    }
+    .cm-header-1.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
+    .cm-header-2.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
+    .cm-header-3.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
+    .cm-header-4.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
+    .cm-header-5.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code),
+    .cm-header-6.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code) {
+      color: var(--tag-color);
+    }
+  }
+}
+
+/* HR tags */
 .markdown-rendered {
   hr {
     border: none;