vowel 0.3.2 → 0.3.3

package/README.md

@@ -43,7 +43,7 @@ See the docs: [vowel.cc](https://vowel.cc).
   - [x] 404.html (just make 404.md)
 - [ ] Markup
   - [.] Image as figure
-  - [ ] Admonitions
+  - [x] Admonitions
   - [x] Heading anchors
   - [ ] GFM emoji
   - [ ] Mermaid
@@ -51,7 +51,7 @@ See the docs: [vowel.cc](https://vowel.cc).
   - [x] TOC
 - [ ] Non-urgent fixes / improvements
   - [ ] Compare metadata on file update
-  - [ ] Prune/cleanup step
+  - [x] Prune/cleanup step
   - [ ] Dependency type (file, settings, folder)
 - [ ] New systems
   - [ ] Tags
@@ -134,7 +134,7 @@ See the docs: [vowel.cc](https://vowel.cc).
 - [ ] Sort nav items
 - [ ] Canonical URL
 - [ ] Handle external links
-- [ ] Admonitions
+- [x] Admonitions
 - [ ] Use hgroup for site title, page title, etc
 - [ ] Images as `<figure>`
 - [ ] Hidden routes

package/bin.js

@@ -196,7 +196,7 @@ async function main() {
   const dbExists = await exists(".votive.db")
 
   await removeCache(args.logging === "verbose")
-  // await removeDB(args.logging === "verbose")
+  await removeDB(args.logging === "verbose")
   await fs.mkdir(config.destinationFolder, { recursive: true })
 
   if (!args.skip && !dbExists) {

package/config.js

@@ -4,6 +4,7 @@ import vowelMarkdownPlugin from "./plugins/markdown/index.js"
 import vowelRobotsPlugin from "./plugins/robots/index.js"
 import vowelXMLPlugin from "./plugins/xml/index.js"
 import vowelVectorPlugin from "./plugins/vectors/index.js"
+import vowelFontsPlugin from "./plugins/fonts/index.js"
 
 /** @import {VotiveConfig} from "votive" */
 export const config = {
@@ -15,6 +16,7 @@ export const config = {
     vowelStylesPlugin,
     vowelRobotsPlugin,
     vowelXMLPlugin,
-    vowelVectorPlugin
+    vowelVectorPlugin,
+    vowelFontsPlugin
   ]
 }

package/docs-source/blog/home.md

@@ -0,0 +1,5 @@
+# Blog
+
+Here's a blog.
+
+/blog?count=100&content=false

package/docs-source/blog/url-ui.md

@@ -1,9 +1,13 @@
-# Long Live the URL
+---
+link: https://www.nngroup.com/articles/url-as-ui/
+breadcrumb: URL Design
+---
 
 June 27, 2024
 
 ![some things](./dog.jpeg)
 
+# Long Live the URL
 
 This article from 1999 about how to write good URLs is awesome. Some tips:
 

package/docs-source/docs/items.md

@@ -7,7 +7,7 @@ To create one, prefix a file or folder with a `$`, such as `$faqs`. The file or
 ```md
 Here are answers to common questions:
 
-/faqs?count=10
+/$faqs?count=10
 ```
 
 This also allows richer content, as the item will be displayed with frontmatter.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vowel",
   "type": "module",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "bin": "bin.js",
   "main": "index.js",
   "scripts": {
@@ -67,8 +67,8 @@
     "unist-util-visit": "^5.0.0",
     "unist-util-visit-parents": "^6.0.0",
     "url-metadata": "^5.4.1",
+    "votive": "^0.2.0",
     "voot": "^0.1.0",
-    "votive": "^0.1.0",
     "xast-util-sitemap": "^2.0.0",
     "xast-util-to-xml": "^4.0.0",
     "xml": "^1.0.1",

package/plugins/fonts/index.js

@@ -1,15 +1,27 @@
+import { readFile } from "node:fs/promises"
 /** @import * as Votive from "votive" */
 
+/** @type {Votive.ProcessorWrite} */
+async function writeFile(destination, database, config) {
+  const buffer = await readFile(destination.abstract.filePath)
+  return {
+    data: buffer,
+  }
+}
+
+function readFont(filePath) {
+  return {
+    abstract: { filePath },
+    metadata: {}
+  }
+}
+
 /** @type {Votive.VotiveProcessor} */
 const fontsReader = {
-  syntax: "font",
-  filter: {
-    extensions: [".woff", ".woff2", ".ttf", ".otf"]
-  },
-  read: {
-    path: null,
-  },
-  write: null
+  format: "buffer",
+  extensions: [".woff", ".woff2", ".ttf", ".otf"],
+  readFile: readFont,
+  writeFile
 }
 
 /** @type {Votive.VotivePlugin} */

package/plugins/markdown/index.js

@@ -82,6 +82,13 @@ function makeHead(metadata, url) {
     })
   )
 
+  if (!metadata.image && metadata.first_image && url) treeMainHead.push(
+    h("img", {
+      src: metadata.first_image,
+      itemprop: "image"
+    })
+  )
+
   if (metadata.fm_description) treeMainHead.push(
     h("p",
       {
@@ -153,7 +160,6 @@ function readMarkdown(string, filePath, destinationPath, database, config) {
   normalizeHeadings(mdast)
   const pathInfo = path.parse(filePath)
 
-  const startTitle = performance.now()
   const metadata = getMetadata(mdast, filePath)
 
   metadata.inferred_label = toTitleCase(pathInfo.name)
@@ -168,6 +174,15 @@ function readMarkdown(string, filePath, destinationPath, database, config) {
 
   selectMetadata(metadata)
 
+  if (!metadata.image) {
+    const firstImageParagraph = mdast.children.find(child => child.children && child.children[0].type === "image")
+    if (firstImageParagraph) {
+      metadata.first_image = firstImageParagraph.children[0].url
+    }
+  }
+
+  if (metadata.fm_published === false) return
+
   if (pathInfo.base === "settings.md") {
     for (const key in metadata) {
       database.setting.create(
@@ -461,61 +476,65 @@ function readFolder(folder, database, config, isRoot) {
       ]
 
 
-      if (themes.includes(settings.theme) || !settings.theme) {
-        if (!settings.theme) database.setting.create("", "theme", "default")
+      if (themes.includes(settings.fm_theme?.[""][0]) || !settings.fm_theme) {
+        if (!settings.fm_theme) database.setting.create("", "theme", "default")
 
-        database.setting.create(
-          "",
-          "stylesheets",
-          "reset.css"
-        )
+        const theme = settings.fm_theme?.[""][0] || "default"
 
-        const resetStylesPath = path.join(VOWEL_DIR, "stylesheets", "ResetStyles.css")
+        if (themes.includes(theme)) {
 
-        if (settings.theme === "reset") return
+          database.setting.create(
+            "",
+            "stylesheets",
+            "reset.css"
+          )
 
-        database.setting.create(
-          "",
-          "stylesheets",
-          "typography.css"
-        )
+          const resetStylesPath = path.join(VOWEL_DIR, "stylesheets", "ResetStyles.css")
+          const resetStyles = readFileSync(resetStylesPath, "utf-8")
 
-        if (settings.theme === "typography") return
+          database.target.create({
+            path: "reset.css",
+            abstract: { css: resetStyles },
+            metadata: {},
+            syntax: "css"
+          })
 
-        database.setting.create(
-          "",
-          "stylesheets",
-          "default.css"
-        )
+          if (theme === "reset") return
 
-        const typeStylesPath = path.join(VOWEL_DIR, "stylesheets", "TypographyStyles.css")
-        const defaultStylesPath = path.join(VOWEL_DIR, "stylesheets", "DefaultStyles.css")
+          database.setting.create(
+            "",
+            "stylesheets",
+            "typography.css"
+          )
 
-        const resetStyles = readFileSync(resetStylesPath, "utf-8")
-        const typeStyles = readFileSync(typeStylesPath, "utf-8")
-        const defaultStyles = readFileSync(defaultStylesPath, "utf-8")
+          const typeStylesPath = path.join(VOWEL_DIR, "stylesheets", "TypographyStyles.css")
+          const typeStyles = readFileSync(typeStylesPath, "utf-8")
 
+          database.target.create({
+            path: "typography.css",
+            abstract: { css: typeStyles },
+            metadata: {},
+            syntax: "css"
+          })
 
-        database.target.create({
-          path: "reset.css",
-          abstract: { css: resetStyles },
-          metadata: {},
-          syntax: "css"
-        })
+          if (theme === "typography") return
 
-        database.target.create({
-          path: "typography.css",
-          abstract: { css: typeStyles },
-          metadata: {},
-          syntax: "css"
-        })
+          database.setting.create(
+            "",
+            "stylesheets",
+            "default.css"
+          )
 
-        database.target.create({
-          path: "default.css",
-          abstract: { css: defaultStyles },
-          metadata: {},
-          syntax: "css"
-        })
+          const defaultStylesPath = path.join(VOWEL_DIR, "stylesheets", "DefaultStyles.css")
+          const defaultStyles = readFileSync(defaultStylesPath, "utf-8")
+
+          database.target.create({
+            path: "default.css",
+            abstract: { css: defaultStyles },
+            metadata: {},
+            syntax: "css"
+          })
+        }
       }
     }
 
@@ -659,13 +678,29 @@ function writeHTML(destination, database, config) {
       property: "og:description",
       content: metadata.description,
     }),
-    h("meta", {
-      property: "og:url",
-      content: metadata.prettyURL
-    }),
     ...treeStyleSheets,
   ])
 
+  if (settings.fm_domain) {
+    const settingsDomain = settings.fm_domain[""][0]
+    const domain = settingsDomain.startsWith("http")
+      ? settingsDomain
+      : "https://" + settingsDomain
+
+    const { href } = new URL(metadata.prettyURL, domain)
+
+    treeHead.children.push(
+      h("meta", {
+        property: "og:url",
+        content: href
+      }),
+      h("link", {
+        rel: "canonical",
+        href
+      })
+    )
+  }
+
 
   if (metadata.image) {
     treeHead.children.push(h("meta", {
@@ -678,7 +713,7 @@ function writeHTML(destination, database, config) {
   if (settings.title) {
     treeHead.children.push(h("meta", {
       property: "og:site_name",
-      content: settings.title[0]
+      content: settings.fm_title?.[""][0]
     }))
   }
 
@@ -762,7 +797,9 @@ function writeHTML(destination, database, config) {
     headerElements.push(
       h('a.logo', {
         href: "/",
-        rel: "home"
+        alt: "",
+        rel: "home",
+        "style": `mask-image: url("/${settings.fm_logo[""]}")`
       }, h("img", {
         src: "/" + settings.fm_logo[""]
       }))
@@ -843,8 +880,13 @@ function writeHTML(destination, database, config) {
 
   visit(treeContent, testPaths, ({ children: [child] }, i, p) => {
 
-    const recursive = child.value.endsWith("**")
-    const many = child.value.endsWith("*")
+    // const recursive = child.value.endsWith("**")
+    // const many = child.value.endsWith("*")
+
+    const url = new URL(child.value, "thismessage://")
+    const { dir, base } = path.parse(url.pathname)
+    const recursive = base === "**"
+    const many = base === "*" || base === "**"
 
     if (!many) {
       const targetFilePathInfo = path.parse(child.value)
@@ -853,20 +895,27 @@ function writeHTML(destination, database, config) {
       const targetFilePath = path.relative("/", path.format(targetFilePathInfo))
       const target = database.target.getWithTrackers(targetFilePath, destination.path)
 
-      const article = h('article', makeHead(target.metadata, target.metadata.prettyURL))
+      if (target) {
+        const article = h('article', makeHead(target.metadata, target.metadata.prettyURL))
+
+        p.children.splice(i, 1, article)
+      }
 
-      p.children.splice(i, 1, article)
     }
 
     if (many) {
-      const { dir } = path.parse(path.relative("/", child.value))
+      const folder = path.relative("/", dir)
+      // const url = new URL(child.value, "thismessage://")
+      const count = url.searchParams.get("count")
       const targets = database.target.getManyWithTrackers({
-        folder: dir,
+        folder,
         recursive,
         query: {},
         dependent: destination.path
       })
 
+      if (count) targets.splice(Number(count))
+
       const list = h("section",
         targets.map(target => {
           return h('article', makeHead(target.metadata, target.metadata.prettyURL))
@@ -896,6 +945,9 @@ function writeHTML(destination, database, config) {
 
 
   const treeMain = h('main',
+    {
+      itemscope: true
+    },
     [
       h('nav', {
         'aria-label': 'Breadcrumbs'
@@ -954,15 +1006,16 @@ function writeHTML(destination, database, config) {
     folder: "",
     recursive: true,
     dependent: destination.path,
-  }).filter(target => target.path)
+  }).filter(target => target.path
+    && target.path.endsWith(".html")
+    && !target.metadata.date
+  )
 
   const homeFile = everything.find(item => item.path === "index.html" && item.dir === "")
 
   const globalNavItems = everything.filter(item => {
     return item.dir === ""
       && item.path !== "index.html"
-      && item.path.endsWith(".html")
-      && !item.metadata.date
   })
     .map(getChildren)
 

package/plugins/styles/index.js

@@ -10,9 +10,9 @@ function writeCSS(destination, database, config) {
     code: Buffer.from(destination.abstract.css),
     minify: true,
     targets: {
-      chrome: 146 << 16,
-      firefox: 149 << 16,
-      safari: 26 << 16
+      chrome: 140 << 16,
+      firefox: 140 << 16,
+      safari: 20 << 16
     }
   })
 

package/stylesheets/DefaultStyles.css

@@ -6,31 +6,114 @@
 @layer reset, typography, default;
 
 
+
 @layer default {
 	:root {
-		--text-color: hsl(0, 0%, 13%);
-		--accent-color: hsl(215, 100%, 35%);
-		--accent-color-hover: hsl(215, 76%, 49%);
-		--border-color: hsl(0, 0%, 73%);
-		--main-background: hsl(0, 0%, 100%);
-		--code-background: hsl(0, 0%, 95%);
-		--soft-background: hsl(0, 0%, 95%);
-		/* --soft-background: #00000005; */
-	}
-
-	@media (prefers-color-scheme: dark) {
-		:root {
-			--text-color: hsl(0, 0%, 80%);
-			--accent-color: hsl(194, 76%, 49%);
-			--accent-color-hover: hsl(194, 86%, 57%);
-			--border-color: hsl(0, 0%, 27%);
-			--main-background: hsl(0, 0%, 12%);
-			--code-background: hsl(0, 0%, 5%);
-			--soft-background: hsl(0, 0%, 14%);
-			/* --soft-background: #ffffff07; */
-		}
+
+		--accent-01: oklch(0.9536456092315344 0.030170139248992922 90.24115342246611);
+		--accent-02: oklch(0.8924089806120152 0.08826670827983002 90.24115342246611);
+		--accent-03: oklch(0.844618 0.14828222329121668 90.24115342246611);
+		--accent-04: oklch(0.7854571400878614 0.18029922017024758 90.24115342246611);
+		--accent-05: oklch(0.7110252520511524 0.16670758498691426 90.24115342246611);
+		--accent-06: oklch(0.6307554338482158 0.15012908092125463 90.24115342246611);
+		--accent-07: oklch(0.5558748958282139 0.12696710517027307 90.24115342246611);
+		--accent-08: oklch(0.4945 0.09203251189041753 90.24115342246611);
+		--accent-09: oklch(0.38727951482578865 0.05695363236371703 90.24115342246611);
+		--accent-10: oklch(0.24916012628129958 0.03201699687903088 90.24115342246611);
+		--accent-11: oklch(0.11046170738630641 0.01528852137867617 90.24115342246611);
+		--danger-01: oklch(0.9536456092315344 0.037138530373020395 -25.754653176550182);
+		--danger-02: oklch(0.8924089806120152 0.0908858065656466 -25.754653176550182);
+		--danger-03: oklch(0.844618 0.15656415898125758 -25.754653176550182);
+		--danger-04: oklch(0.7854571400878614 0.2115084537674326 -25.754653176550182);
+		--danger-05: oklch(0.7110252520511524 0.250891532499265 -25.754653176550182);
+		--danger-06: oklch(0.6307554338482158 0.22556107485827934 -25.754653176550182);
+		--danger-07: oklch(0.5558748958282139 0.1952478556703251 -25.754653176550182);
+		--danger-08: oklch(0.4945 0.15069063355165543 -25.754653176550182);
+		--danger-09: oklch(0.38727951482578865 0.1036689817070561 -25.754653176550182);
+		--danger-10: oklch(0.24916012628129958 0.058004850702477094 -25.754653176550182);
+		--danger-11: oklch(0.11046170738630641 0.02748297973358925 -25.754653176550182);
+		--info-01: oklch(0.9536456092315344 0.032559707682643824 244.1900622367698);
+		--info-02: oklch(0.8924089806120152 0.07422782322853594 244.1900622367698);
+		--info-03: oklch(0.844618 0.12605888808084453 244.1900622367698);
+		--info-04: oklch(0.7854571400878614 0.17799411987422387 244.1900622367698);
+		--info-05: oklch(0.7110252520511524 0.22040488113200302 244.1900622367698);
+		--info-06: oklch(0.6307554338482158 0.25495777982975243 244.1900622367698);
+		--info-07: oklch(0.5558748958282139 0.2223980721471087 244.1900622367698);
+		--info-08: oklch(0.4945 0.18072995660121655 244.1900622367698);
+		--info-09: oklch(0.38727951482578865 0.12889889174890792 244.1900622367698);
+		--info-10: oklch(0.24916012628129958 0.0769636599555286 244.1900622367698);
+		--info-11: oklch(0.11046170738630641 0.034552898697749426 244.1900622367698);
+		--primary-01: oklch(0.9536456092315344 0.033943473040194294 -82.72000000000003);
+		--primary-02: oklch(0.8924089806120152 0.07208713732898053 -82.72000000000003);
+		--primary-03: oklch(0.844618 0.10967407324412015 -82.72000000000003);
+		--primary-04: oklch(0.7854571400878614 0.14835354282702512 -82.72000000000003);
+		--primary-05: oklch(0.7110252520511524 0.1870407118569507 -82.72000000000003);
+		--primary-06: oklch(0.6307554338482158 0.2246513001779757 -82.72000000000003);
+		--primary-07: oklch(0.5558748958282139 0.2627985040398166 -82.72000000000003);
+		--primary-08: oklch(0.4945 0.297278 -82.72000000000003);
+		--primary-09: oklch(0.38727951482578865 0.22519086267101945 -82.72000000000003);
+		--primary-10: oklch(0.24916012628129958 0.1489244571729748 -82.72000000000003);
+		--primary-11: oklch(0.11046170738630641 0.07262669982202441 -82.72000000000003);
+		--secondary-01: oklch(0.9536456092315344 0.03523506763462919 174.9674);
+		--secondary-02: oklch(0.8924089806120152 0.12226651611616707 174.9674);
+		--secondary-03: oklch(0.844618 0.159299 174.9674);
+		--secondary-04: oklch(0.7854571400878614 0.14932563102137283 174.9674);
+		--secondary-05: oklch(0.7110252520511524 0.13708788342722794 174.9674);
+		--secondary-06: oklch(0.6307554338482158 0.12406393236537076 174.9674);
+		--secondary-07: oklch(0.5558748958282139 0.09651562296811833 174.9674);
+		--secondary-08: oklch(0.4945 0.06639390943163861 174.9674);
+		--secondary-09: oklch(0.38727951482578865 0.037032483883832935 174.9674);
+		--secondary-10: oklch(0.24916012628129958 0.02375390884349093 174.9674);
+		--secondary-11: oklch(0.11046170738630641 0.011400212679566413 174.9674);
+		--success-01: oklch(0.9536456092315344 0.024257111887574123 148.30000439636984);
+		--success-02: oklch(0.8924089806120152 0.07351482341637697 148.30000439636984);
+		--success-03: oklch(0.844618 0.12466168066207778 148.30000439636984);
+		--success-04: oklch(0.7854571400878614 0.15042101659568144 148.30000439636984);
+		--success-05: oklch(0.7110252520511524 0.13948969668297212 148.30000439636984);
+		--success-06: oklch(0.6307554338482158 0.1261639047081073 148.30000439636984);
+		--success-07: oklch(0.5558748958282139 0.10791110186311959 148.30000439636984);
+		--success-08: oklch(0.4945 0.07690619317930446 148.30000439636984);
+		--success-09: oklch(0.38727951482578865 0.0457513376060701 148.30000439636984);
+		--success-10: oklch(0.24916012628129958 0.02575933593360364 148.30000439636984);
+		--success-11: oklch(0.11046170738630641 0.012313506052849059 148.30000439636984);
+		--tertiary-01: oklch(0.9536456092315344 0.034046389815560296 2.791302501092794);
+		--tertiary-02: oklch(0.8924089806120152 0.08421751016426371 2.791302501092794);
+		--tertiary-03: oklch(0.844618 0.14726059081820986 2.791302501092794);
+		--tertiary-04: oklch(0.7854571400878614 0.19873235540856865 2.791302501092794);
+		--tertiary-05: oklch(0.7110252520511524 0.23494450943888123 2.791302501092794);
+		--tertiary-06: oklch(0.6307554338482158 0.21174506900632417 2.791302501092794);
+		--tertiary-07: oklch(0.5558748958282139 0.1839025285604721 2.791302501092794);
+		--tertiary-08: oklch(0.4945 0.14178977136603388 2.791302501092794);
+		--tertiary-09: oklch(0.38727951482578865 0.09664947566806639 2.791302501092794);
+		--tertiary-10: oklch(0.24916012628129958 0.053320044751899345 2.791302501092794);
+		--tertiary-11: oklch(0.11046170738630641 0.025277009084351466 2.791302501092794);
+		--warning-01: oklch(0.9536456092315344 0.033978843637678835 61.19378984733035);
+		--warning-02: oklch(0.8924089806120152 0.09727044978770355 61.19378984733035);
+		--warning-03: oklch(0.844618 0.16243636817381144 61.19378984733035);
+		--warning-04: oklch(0.7854571400878614 0.19844507360799077 61.19378984733035);
+		--warning-05: oklch(0.7110252520511524 0.18312495283983363 61.19378984733035);
+		--warning-06: oklch(0.6307554338482158 0.164466229970312 61.19378984733035);
+		--warning-07: oklch(0.5558748958282139 0.1383102018356785 61.19378984733035);
+		--warning-08: oklch(0.4945 0.10117462382028729 61.19378984733035);
+		--warning-09: oklch(0.38727951482578865 0.06390117110643204 61.19378984733035);
+		--warning-10: oklch(0.24916012628129958 0.03600870543417937 61.19378984733035);
+		--warning-11: oklch(0.11046170738630641 0.017183679327988338 61.19378984733035);
+
+
+		--text-color: light-dark(var(--primary-11), var(--primary-01));
+		--link-color: light-dark(var(--secondary-07), var(--secondary-03));
+		--link-hover-color: light-dark(var(--secondary-06), var(--secondary-04));
+		--border-color: light-dark(var(--primary-03), var(--primary-09));
+		--main-background: light-dark(var(--primary-01), var(--primary-11));
+		--code-background: light-dark(var(--primary-02), var(--primary-10));
+		--soft-background: light-dark(var(--primary-02), var(--primary-10));
+	}
+
+	:root {
+		color-scheme: light dark;
 	}
 
+
 	/* Layout */
 
 	body {
@@ -91,10 +174,10 @@
 	}
 
 	a:where(:not([rel=home])) {
-		color: var(--accent-color);
+		color: var(--link-color);
 
 		&:hover {
-			color: var(--accent-color-hover);
+			color: var(--link-hover-color);
 		}
 	}
 
@@ -190,6 +273,16 @@
 			font-size: 1.5em;
 		}
 
+		a.logo {
+			/* mask-image: var(--logo); */
+			/* mask-image: unset; */
+			background: var(--primary-10);
+
+			img {
+				visibility: hidden;
+			}
+		}
+
 		nav {
 			border: 1px solid var(--border-color);
 			padding: 0px 6px;
@@ -240,7 +333,7 @@
 
 	nav[aria-label=Breadcrumbs] {
 		text-transform: uppercase;
-		color: var(--border-color);
+		color: var(--primary-05);
 
 		a {
 			color: unset;
@@ -293,8 +386,10 @@
 
 	/* Main */
 
-	p:where([itemprop=description]) {
+	p:where([itemprop=description]),
+	main>p:first-of-type {
 		font-size: 1.3em;
+		color: var(--secondary-10);
 	}
 
 	article a {
@@ -348,37 +443,51 @@
 
 	aside.alert.note {
 		--icon: 'ℹ️';
-		--rgb: 71, 139, 230;
+		background: var(--info-02);
+		color: var(--info-10);
+		border-left: 3px solid var(--info-03);
+
+		h2 {
+			color: var(--info-08);
+		}
 	}
 
-	aside.alert.tip {
+	aside.alert.success {
 		--icon: '💡';
-		--rgb: 87, 171, 90;
-	}
+		background: var(--success-02);
+		color: var(--success-10);
+		border-left: 3px solid var(--success-03);
 
-	aside.alert.important {
-		--icon: '💬';
-		--rgb: 152, 110, 226;
+		h2 {
+			color: var(--success-08);
+		}
 	}
 
 	aside.alert.warning {
 		--icon: '⚠️';
-		--rgb: 198, 144, 38;
+		background: var(--warning-02);
+		color: var(--warning-10);
+		border-left: 3px solid var(--warning-03);
+
+		h2 {
+			color: var(--warning-08);
+		}
 	}
 
-	aside.alert.caution {
+
+	aside.alert.danger {
 		--icon: '⛔️';
-		--rgb: 229, 83, 75;
+		background: var(--danger-02);
+		color: var(--danger-10);
+		border-left: 3px solid var(--danger-03);
+
+		h2 {
+			color: var(--danger-08);
+		}
 	}
 
 	aside.alert {
-		border-left: 3px solid rgb(var(--rgb));
 		padding: 1.5rem 2rem;
-		background: rgba(var(--rgb), 0.04);
-	}
-
-	aside.alert h2 {
-		color: rgb(var(--rgb));
 	}
 
 	aside.alert h2:before {