Add badges plugin with code and CSS.

2025-12-23 12:54:06 -06:00 · 2025-06-01 17:01:05 +05:30 · 2025-06-01 17:01:05 +05:30 · 86052c0c13
commit 86052c0c13
parent 096ef220dc
6 changed files with 666 additions and 1 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -85,6 +85,7 @@
        "@types/ws": "^8.18.1",
        "@types/yargs": "^17.0.33",
        "esbuild": "^0.25.5",
+        "lucide-static": "0.511.0",
        "prettier": "^3.5.3",
        "tsx": "^4.19.4",
        "typescript": "^5.8.3"
@ -4138,6 +4139,13 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
+    "node_modules/lucide-static": {
+      "version": "0.511.0",
+      "resolved": "https://registry.npmjs.org/lucide-static/-/lucide-static-0.511.0.tgz",
+      "integrity": "sha512-/MWOjEyGZO84B16BeqbeleinbmeYxOBsbYDt/Yk6xGwMYwDm6dx43jKHMxGDqW9U84qWL13dNvVW0SMADhUSyg==",
+      "dev": true,
+      "license": "ISC"
+    },
    "node_modules/markdown-table": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
--- a/package.json
+++ b/package.json
@ -110,6 +110,7 @@
    "esbuild": "^0.25.5",
    "prettier": "^3.5.3",
    "tsx": "^4.19.4",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "lucide-static": "0.511.0"
  }
 }
--- a/quartz.config.ts
+++ b/quartz.config.ts
@ -72,6 +72,7 @@ const config: QuartzConfig = {
      Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
      Plugin.Description(),
      Plugin.Latex({ renderEngine: "katex" }),
+      Plugin.InlineBadges(),
    ],
    filters: [Plugin.RemoveDrafts()],
    emitters: [
--- a/quartz/plugins/transformers/badges.ts
+++ b/quartz/plugins/transformers/badges.ts
@ -0,0 +1,233 @@
+import { QuartzTransformerPlugin } from "../types"
+import badgesCSS from "../../styles/badges.scss"
+import { JSResource, CSSResource } from "../../util/resources"
+import icons from "lucide-static"
+
+export const BADGE_TYPES: any[] = [
+  ["note", "Note", "lucide-pencil"],
+  ["info", "Info", "lucide-info"],
+  ["todo", "Todo", "lucide-check-circle-2"],
+  ["abstract", "Abstract", "lucide-clipboard-list"],
+  ["summary", "Summary", "lucide-clipboard-list"],
+  ["tldr", "TLDR", "lucide-clipboard-list"],
+  ["tip", "Tip", "lucide-flame"],
+  ["hint", "Hint", "lucide-flame"],
+  ["important", "Important", "lucide-flame"],
+  ["success", "Success", "lucide-check"],
+  ["check", "Check", "lucide-check"],
+  ["done", "Done", "lucide-check"],
+  ["question", "Question", "help-circle"],
+  ["help", "Help", "help-circle"],
+  ["faq", "FAQ", "help-circle"],
+  ["warning", "Warning", "lucide-alert-triangle"],
+  ["caution", "Caution", "lucide-alert-triangle"],
+  ["attention", "Attention", "lucide-alert-triangle"],
+  ["failure", "Failure", "lucide-x"],
+  ["fail", "Fail", "lucide-x"],
+  ["missing", "Missing", "lucide-x"],
+  ["danger", "Danger", "lucide-zap"],
+  ["error", "Error", "lucide-zap"],
+  ["bug", "Bug", "lucide-bug"],
+  ["example", "Example", "lucide-list"],
+  ["quote", "Quote", "quote-glyph"],
+  ["cite", "Cite", "quote-glyph"],
+  ["power", "Power", "lucide-power"],
+  ["verse", "Verse", "lucide-music"],
+  ["complete", "Complete", "lucide-check-circle"],
+  ["milestone", "Milestone", "lucide-milestone"],
+  ["component", "Component", "lucide-toy-brick"],
+  ["polish", "Polish", "lucide-car"],
+  ["point", "point", "lucide-pointer"],
+  ["dream", "Dream", "lucide-moon"],
+  ["process", "Process", "lucide-clock"],
+  ["refine", "Refine", "lucide-axe"],
+  ["image", "Image", "lucide-image"],
+  ["party", "Party", "lucide-party-popper"],
+  ["crystallize", "Crystallize", "lucide-diamond"],
+  ["definition", "Definition", "lucide-key"],
+  ["mention", "Mention", "lucide-at-sign"],
+  ["exclaim", "Exclaim", "lucide-megaphone"],
+  ["meta", "Meta", "lucide-filter"],
+  ["compute", "Compute", "lucide-hourglass"],
+  ["emergency", "Emergency", "lucide-siren"],
+  ["magnet", "Magnet", "lucide-magnet"],
+  ["flag", "Flag", "flag"],
+  ["branch", "Branch", "network"],
+  ["snippet", "Snippet", "scissors"],
+  ["lock", "Lock", "lock"],
+  ["highlight", "Highlight", "highlighter"],
+  ["clue", "Clue", "puzzle"],
+  ["claim", "Claim", "anchor"],
+  ["profile", "Profile", "lucide-user"],
+  ["hat-tip", "Hat-tip", "hard-hat"],
+  ["dig", "Dig", "shovel"],
+  ["witness", "Witness", "edit-3"],
+  ["notice", "Notice", "pen-tool"],
+  ["attachment", "Attachment", "paperclip"],
+  ["lightbulb", "Lightbulb", "lightbulb"],
+  ["prohibit", "Prohibit", "ban"],
+  ["stop", "Stop", "lucide-alert-octagon"],
+  ["bomb", "Bomb", "lucide-bomb"],
+  ["hold", "Hold", "lucide-hand"],
+  ["charge", "Charge", "lucide-zap"],
+  ["sprout", "Sprout", "lucide-sprout"],
+  ["extract", "Extract", "lucide-hammer"],
+  ["compass", "Compass", "lucide-compass"],
+  ["map", "Map", "lucide-map"],
+  ["expedition", "Expedition", "lucide-mountain-snow"],
+  ["home", "Home", "lucide-home"],
+  ["knowledge", "Knowledge", "lucide-book"],
+  ["account", "Account", "open-vault"],
+  ["judgment", "Judgment", "lucide-gavel"],
+  ["balance", "Balance", "lucide-scale"],
+  ["feast", "Feast", "lucide-grape"],
+  ["gift", "Gift", "lucide-gift"],
+  ["love", "Love", "lucide-heart"],
+  ["specimen", "Specimen", "lucide-gem"],
+  ["command", "Command", "lucide-swords"],
+  ["deed", "Deed", "lucide-scroll"],
+  ["honor", "Honor", "lucide-sword"],
+  ["reward", "Reward", "lucide-crown"],
+  ["customized", "Customized", "hash"],
+  ["vault", "Vault", "vault"],
+]
+
+const REGEXP = /\[!!([^\]]+)\]/gm
+const CODEREGEX = /`([^`\n]+)`/g
+
+// This plugin has no options.
+export interface Options {
+  dummyOption: boolean
+}
+
+export const InlineBadges: QuartzTransformerPlugin<Partial<Options>> = (_userOpts) => {
+  return {
+    name: "InlineBadges",
+    textTransform(_ctx, src) {
+      var srcReplacement: string = src //Start by assuming there are no badges.
+      for (const match of src.matchAll(CODEREGEX)) {
+        for (const badgeMatch of match[0].matchAll(REGEXP)) {
+          srcReplacement = srcReplacement.replace(match[0], buildBadge(badgeMatch[0]))
+        }
+      }
+      return srcReplacement
+    },
+    externalResources() {
+      // Required for proper rendering under themes.
+      const js: JSResource[] = []
+      const css: CSSResource[] = []
+
+      css.push({
+        content: badgesCSS,
+        inline: true,
+      })
+      css.push({
+        // Requirement for the SVG to align properly.
+        content: ".inline-badge .inline-badge-icon svg {display: flex;align-self: center;}",
+        inline: true,
+      })
+      return { js, css }
+    },
+  }
+}
+
+function buildBadge(text: string) {
+  // HTML Elements
+  let newEl = ""
+  let iconEl = ""
+  let titleEl = ""
+  let textEl = ""
+  let attrType = ""
+  let part: string = text?.substring(2) ?? ""
+  let content: string = part?.substring(part.length - 1, 1).trim() ?? ""
+  let styleAttr = ""
+
+  // no content
+  if (!content.length) {
+    newEl = "<span>Badges syntax error</span>"
+    return newEl
+  }
+
+  let parts: string[] = content.split(":", 2)
+  // return if NO CONTENT
+  if (parts.length < 2) {
+    newEl = `<span style="color:var(--text-error)">❌ Badges syntax error</span>`
+    return newEl
+  }
+
+  // type of badge
+  let badgeType: string = parts[0].trim()
+  // build and check for extras
+  let extras: string[] = badgeType.split("|")
+  let hasExtra: boolean = extras.length > 1
+  // title value for badge
+  let badgeContent: string = parts[1].trim().split("|")[0] //Original code doesnt have .split[...] but for some reason its needed for proper rendering.
+
+  // custom badge
+  if (extras.length == 3) {
+    //icon
+    iconEl = `<span class="inline-badge-icon" aria-label="${extras[2]}">${getLucideIconSvg(extras[1])}</span>`
+    attrType = "customized"
+
+    // details
+    let details: any[] = parts[1].split("|")
+
+    //title
+    let title: string = details[0].trim()
+    titleEl = `<span class="inline-badge-title-inner">${title}</span>`
+
+    // color
+    let color: string = "currentColor"
+    if (details[1]) {
+      color = details[1].trim()
+    }
+
+    styleAttr = `style="--customize-badge-color: ${color};"`
+  } else {
+    if (hasExtra) {
+      // Github badges
+      if (extras[1].startsWith("ghb>") || extras[1].startsWith("ghs>")) {
+        let ghType: string = extras[1].split(">")[1].trim()
+        iconEl = `<span class="inline-badge-icon" aria-label="Github">${getLucideIconSvg("github")}</span>`
+        textEl = `<span class="gh-type">${ghType}</span>`
+        attrType = extras[1].startsWith("ghb>") ? "github" : "github-success"
+        badgeType = extras[1].startsWith("ghb>") ? "github" : "github-success"
+      } else {
+        // No icon, text only
+        iconEl = `<span>${badgeType.split("|")[1].trim()}</span>`
+        attrType = "text"
+        badgeType = "text"
+      }
+    } else {
+      // Non-github
+      attrType = badgeType.trim()
+      BADGE_TYPES.forEach((el) => {
+        if (el.indexOf(badgeType.toLowerCase()) == 0 && el[2].length > 0) {
+          iconEl = `<span class="inline-badge-icon" aria-label=${badgeType.trim()}>${getLucideIconSvg(el[2])}</span>`
+        }
+      })
+    }
+  }
+  // render
+  titleEl = `<span class="inline-badge-title-inner">${badgeContent}</span>`
+  newEl = `<span class="inline-badge" data-inline-badge="${attrType.toLowerCase()}" ${styleAttr}>${iconEl}${textEl}${titleEl}</span>`
+  return newEl
+}
+
+function getLucideIconSvg(iconName: string): string {
+  var potentialIconReturn =
+    icons[toPascalCase(iconName.replace(/^lucide-/, "")) as keyof typeof icons]
+  if (potentialIconReturn) {
+    var iconToReturn = potentialIconReturn.replace(/\n/g, "").replace("  ", " ")
+    return iconToReturn
+  } else {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ban-icon lucide-ban"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>`
+  }
+}
+
+function toPascalCase(str: string): string {
+  // First, convert kebab-case to camelCase
+  const camelCaseStr = str.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
+  // Then, capitalize the first letter to make it PascalCase
+  return camelCaseStr.charAt(0).toUpperCase() + camelCaseStr.slice(1)
+}
--- a/quartz/plugins/transformers/index.ts
+++ b/quartz/plugins/transformers/index.ts
@ -11,3 +11,4 @@ export { SyntaxHighlighting } from "./syntax"
 export { TableOfContents } from "./toc"
 export { HardLineBreaks } from "./linebreaks"
 export { RoamFlavoredMarkdown } from "./roam"
+export { InlineBadges } from "./badges"
--- a/quartz/styles/badges.scss
+++ b/quartz/styles/badges.scss
@ -0,0 +1,421 @@
+body {
+  --inline-badge-border-color: transparent;
+  --inline-badge-font-size: 0.8em;
+  --inline-badge-border-radius: var(--radius-s);
+  --inline-badge-border: 1px solid var(--inline-badge-border-color);
+  --my-custom-rgb: var(--color-green-rgb);
+}
+.inline-badge {
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+  vertical-align: middle;
+  border-radius: var(--inline-badge-border-radius);
+  font-weight: 500;
+  border: var(--inline-badge-border);
+  cursor: default;
+}
+.inline-badge .inline-badge-extra::after {
+  content: ":";
+}
+.inline-badge .gh-type {
+  display: inline-block !important;
+  font-size: var(--inline-badge-font-size);
+  padding-right: 0.5em;
+  padding-top: 0.15em;
+  /* color: var(--color-blue); */
+}
+.inline-badge .inline-badge-extra {
+  display: inline-block !important;
+  font-size: var(--inline-badge-font-size);
+  padding-inline: 0.5em;
+  padding-top: 0.15em;
+  font-family: inherit;
+}
+.inline-badge .inline-badge-icon {
+  padding: 0.3em;
+}
+.inline-badge .inline-badge-icon svg {
+  width: 14px;
+  height: 14px;
+}
+.inline-badge .inline-badge-extra,
+.inline-badge .inline-badge-icon {
+  display: inline-flex !important;
+}
+.inline-badge .inline-badge-title-inner {
+  display: inline-block !important;
+  font-size: var(--inline-badge-font-size);
+  font-weight: inherit;
+  padding-right: 5px;
+  padding-top: 2px;
+}
+.inline-badge[data-inline-badge="info"],
+.inline-badge[data-inline-badge="todo"],
+.inline-badge[data-inline-badge="note"] {
+  color: rgba(var(--color-blue-rgb), 1);
+  background-color: rgba(var(--color-blue-rgb), 0.123);
+}
+.inline-badge[data-inline-badge="example"] {
+  color: rgba(var(--color-purple-rgb), 1);
+  background-color: rgba(var(--color-purple-rgb), 0.123);
+}
+.inline-badge[data-inline-badge="abstract"],
+.inline-badge[data-inline-badge="summary"],
+.inline-badge[data-inline-badge="tldr"],
+.inline-badge[data-inline-badge="tip"],
+.inline-badge[data-inline-badge="hint"],
+.inline-badge[data-inline-badge="important"] {
+  color: rgba(var(--color-cyan-rgb), 1);
+  background-color: rgba(var(--color-cyan-rgb), 0.133);
+}
+.inline-badge[data-inline-badge="success"],
+.inline-badge[data-inline-badge="check"],
+.inline-badge[data-inline-badge="done"] {
+  color: rgba(var(--color-green-rgb), 1);
+  background-color: rgba(var(--color-green-rgb), 0.123);
+}
+.inline-badge[data-inline-badge="question"],
+.inline-badge[data-inline-badge="help"],
+.inline-badge[data-inline-badge="faq"] {
+  color: rgba(var(--color-yellow-rgb), 1);
+  background-color: rgba(var(--color-yellow-rgb), 0.123);
+}
+.inline-badge[data-inline-badge="warning"],
+.inline-badge[data-inline-badge="caution"],
+.inline-badge[data-inline-badge="attention"] {
+  color: rgba(var(--color-orange-rgb), 1);
+  background-color: rgba(var(--color-orange-rgb), 0.123);
+}
+.inline-badge[data-inline-badge="failure"],
+.inline-badge[data-inline-badge="fail"],
+.inline-badge[data-inline-badge="missing"],
+.inline-badge[data-inline-badge="bug"],
+.inline-badge[data-inline-badge="error"],
+.inline-badge[data-inline-badge="danger"] {
+  color: rgba(var(--color-red-rgb), 1);
+  background-color: rgba(var(--color-red-rgb), 0.123);
+}
+.inline-badge[data-inline-badge^="power"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 70, 164, 115;
+}
+.inline-badge[data-inline-badge^="verse"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 80, 181, 132;
+}
+.inline-badge[data-inline-badge^="complete"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 78, 182, 127;
+}
+.inline-badge[data-inline-badge^="milestone"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 70, 164, 115;
+}
+.inline-badge[data-inline-badge^="component"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 22, 195, 221;
+}
+.inline-badge[data-inline-badge^="polish"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 26, 194, 225;
+}
+.inline-badge[data-inline-badge^="refine"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 0, 177, 206;
+}
+.inline-badge[data-inline-badge^="process"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 0, 176, 210;
+}
+.inline-badge[data-inline-badge^="dream"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 0, 179, 194;
+}
+.inline-badge[data-inline-badge^="point"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 0, 196, 215;
+}
+.inline-badge[data-inline-badge^="crystallize"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 0, 160, 190;
+}
+.inline-badge[data-inline-badge^="party"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 0, 160, 186;
+}
+.inline-badge[data-inline-badge^="image"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 0, 162, 175;
+}
+.inline-badge[data-inline-badge^="compute"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 97, 163, 230;
+}
+.inline-badge[data-inline-badge^="meta"] {
+  --badge-color: 100, 141, 213;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.168);
+}
+.inline-badge[data-inline-badge^="definition"] {
+  --badge-color: 122, 155, 236;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="expedition"] {
+  --badge-color: 100, 141, 213;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="map"] {
+  --badge-color: 140, 150, 236;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="compass"] {
+  --badge-color: 140, 150, 236;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="knowledge"] {
+  --badge-color: 97, 163, 230;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="home"] {
+  --badge-color: 182, 156, 246;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="account"] {
+  --badge-color: 204, 148, 230;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="judgment"] {
+  --badge-color: 148, 129, 204;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="balance"] {
+  --badge-color: 164, 143, 225;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="feast"] {
+  --badge-color: 182, 156, 246;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="gift"] {
+  --badge-color: 204, 148, 230;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="love"] {
+  --badge-color: 208, 128, 182;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="specimen"] {
+  --badge-color: 208, 126, 186;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="command"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+  --badge-color: 189, 114, 168;
+}
+.inline-badge[data-inline-badge^="deed"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+  --badge-color: 229, 140, 197;
+}
+.inline-badge[data-inline-badge^="honor"] {
+  --badge-color: 229, 140, 197;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="reward"] {
+  --badge-color: 164, 143, 225;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge="customized"] {
+  color: rgba(var(--customize-badge-color), 1);
+  background-color: rgba(var(--customize-badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="claim"] {
+  --badge-color: 214, 139, 71;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="clue"] {
+  --badge-color: 206, 144, 66;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="highlight"] {
+  --badge-color: 186, 130, 58;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="lock"] {
+  --badge-color: 223, 124, 142;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="snippet"] {
+  --badge-color: 186, 130, 58;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="branch"] {
+  --badge-color: 186, 130, 58;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="flag"] {
+  --badge-color: 241, 138, 161;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="dig"] {
+  --badge-color: 163, 143, 45;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="profile"] {
+  --badge-color: 224, 159, 71;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="notice"] {
+  --badge-color: 199, 173, 64;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="witness"] {
+  --badge-color: 146, 150, 58;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="attachment"] {
+  --badge-color: 146, 150, 58;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="lightbulb"] {
+  --badge-color: 180, 180, 74;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="hat-tip"] {
+  --badge-color: 180, 158, 51;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="magnet"] {
+  --badge-color: 225, 129, 99;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="emergency"] {
+  --badge-color: 202, 112, 129;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="prohibit"] {
+  --badge-color: 245, 140, 129;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="stop"] {
+  --badge-color: 245, 140, 129;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="bomb"] {
+  --badge-color: 223, 127, 120;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="extract"] {
+  --badge-color: 78, 182, 127;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="sprout"] {
+  --badge-color: 97, 198, 138;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="charge"] {
+  --badge-color: 84, 199, 148;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="hold"] {
+  --badge-color: 88, 199, 146;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="mention"] {
+  --badge-color: var(--color-blue-rgb);
+  color: rgba(var(--badge-color), 0.8);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="exclaim"] {
+  --badge-color: var(--color-green-rgb);
+  color: rgba(var(--badge-color), 0.8);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="vault"] {
+  --badge-color: var(--color-purple-rgb);
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+/* Github */
+.inline-badge[data-inline-badge="github"] .gh-type {
+  color: var(--color-blue-rgb) !important;
+}
+.inline-badge[data-inline-badge="github"] .inline-badge-title-inner {
+  color: var(--text-normal);
+}
+.inline-badge[data-inline-badge="github"] {
+  --badge-color: var(--color-blue-rgb);
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+/* Github SUCCESS */
+.inline-badge[data-inline-badge^="github-success"] .gh-type {
+  color: var(--color-green-rgb) !important;
+}
+.inline-badge[data-inline-badge^="github-success"] .inline-badge-title-inner {
+  color: var(--text-normal);
+}
+.inline-badge[data-inline-badge^="github-success"] {
+  --badge-color: var(--color-green-rgb);
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.144);
+}
+.inline-badge[data-inline-badge^="brain"] {
+  --badge-color: 206, 144, 66;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}