vowel 0.7.8 → 0.8.1

package/stylesheets/DefaultStyles.css

@@ -17,7 +17,7 @@
 	--_name is internal to a sheet: computed here, not for setting.
 */
 
-@layer reset, typography, default, dynamic-typography;
+@layer reset, typography, syntax-highlighting, default, dynamic-typography;
 
 @layer default {
 	:root {
@@ -66,10 +66,29 @@
 		--color-text-hover-panel: light-dark(var(--color-primary-02), var(--color-primary-08));
 		--color-border-hover-panel: light-dark(var(--color-accent-08), var(--color-accent-05));
 
-		/* pre colors */
-		--color-background-pre: light-dark(var(--color-tertiary-09), var(--color-tertiary-02));
-		--color-border-pre: light-dark(var(--color-tertiary-08), var(--color-tertiary-01));
-		--color-text-pre: light-dark(var(--color-tertiary-02), var(--color-tertiary-02));
+		/*
+			pre colors, and the syntax-highlighting sheet's from the
+			palette: the text at the far end from the background, every
+			token one shade in, so each stays above 4.5:1 on the
+			background for any ordinary palette (tests/syntaxColors.js).
+			Comments too, told apart by italics: a shade lighter fell to
+			4.2:1 on a palette from bright colours (#ffcc00, #66ff00).
+		*/
+		--color-background-pre: light-dark(var(--color-tertiary-10), var(--color-tertiary-02));
+		--color-border-pre: light-dark(var(--color-tertiary-08), var(--color-tertiary-02));
+		--color-text-pre: light-dark(var(--color-tertiary-04), var(--color-tertiary-08));
+		--color-comment-pre: light-dark(var(--color-accent-04), var(--color-accent-09));
+		--color-keyword-pre: light-dark(var(--color-primary-04), var(--color-primary-07));
+		--color-function-pre: light-dark(var(--color-secondary-04), var(--color-secondary-07));
+		--color-constant-pre: light-dark(var(--color-info-04), var(--color-info-07));
+		--color-string-pre: light-dark(var(--color-tertiary-04), var(--color-tertiary-08));
+		--color-builtin-pre: light-dark(var(--color-warning-04), var(--color-warning-07));
+		--color-tag-pre: light-dark(var(--color-success-05), var(--color-success-07));
+		--color-list-pre: light-dark(var(--color-warning-05), var(--color-warning-07));
+		--color-inserted-pre: light-dark(var(--color-success-05), var(--color-success-07));
+		--color-background-inserted-pre: light-dark(var(--color-success-07), var(--color-success-05));
+		--color-deleted-pre: light-dark(var(--color-danger-05), var(--color-danger-07));
+		--color-background-deleted-pre: light-dark(var(--color-danger-07), var(--color-danger-05));
 
 		/*
 			alert colors: --color-{element}-alert-{type} for the types the
@@ -433,6 +452,7 @@
 		/* position: relative; */
 
 		table {
+
 			th,
 			td {
 				vertical-align: top;
@@ -479,9 +499,13 @@
 
 
 			pre,
-			code,
-			code.hljs {
-				background: var(--color-background-pre) !important;
+			code {
+				background: var(--color-background-pre);
+			}
+
+			/* a comment is the text's colour, a shade lighter: italics tell it apart */
+			.token.comment {
+				font-style: italic;
 			}
 
 			blockquote {
@@ -540,6 +564,7 @@
 			/* alerts */
 
 			aside.alert {
+
 				/* GitHub's CAUTION and TIP share DANGER's and SUCCESS's colours */
 				&.danger,
 				&.caution {
@@ -688,4 +713,4 @@
 		}
 
 	}
-}
+}

package/stylesheets/SyntaxHighlightingStyles.css

@@ -1,269 +1,162 @@
 /*
- * Syntax highlighting theme for code blocks (rehype-highlight), based on
- * highlight.js's GitHub theme. Light by default, dark under
- * prefers-color-scheme - see highlight.js/styles/github.css and
- * github-dark.css for the source themes this was combined from.
+ * Syntax highlighting for code blocks, highlighted by Prism (refractor).
+ *
+ * Every colour is a variable, `--color-{role}-pre`, declared here with
+ * GitHub's light and dark colours, light by default and dark under
+ * prefers-color-scheme (not light-dark(), which needs a color-scheme
+ * this sheet has no business setting). The default theme redeclares
+ * them from the site's palette, and a project's styles.css can set any
+ * one of them: `:root { --color-keyword-pre: crimson }`.
+ *
+ * In its own layer, before the default theme's (per Sam), so the theme
+ * overrides it; a project's own stylesheet is unlayered and overrides
+ * everything, a whole Prism theme included. The order is declared in
+ * every theme sheet, because a layer named for the first time later
+ * would go to the end.
+ *
+ * Rules of the same specificity are in an order that matters: a token
+ * can have several classes (a heading is `title important`, a YAML key
+ * `key atrule`), and the later rule wins.
  */
-pre code.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 1em
-}
-
-code.hljs {
-  padding: 3px 5px
-}
-
-/*!
-  Theme: GitHub
-  Description: Light theme as seen on github.com
-  Author: github.com
-  Maintainer: @Hirse
-  Updated: 2021-05-15
-
-  Outdated base version: https://github.com/primer/github-syntax-light
-  Current colors taken from GitHub's CSS
-*/
-.hljs {
-  color: #24292e;
-}
 
-.hljs-doctag,
-.hljs-keyword,
-.hljs-meta .hljs-keyword,
-.hljs-template-tag,
-.hljs-template-variable,
-.hljs-type,
-.hljs-variable.language_ {
-  /* prettylights-syntax-keyword */
-  color: #d73a49
-}
-
-.hljs-title,
-.hljs-title.class_,
-.hljs-title.class_.inherited__,
-.hljs-title.function_ {
-  /* prettylights-syntax-entity */
-  color: #6f42c1
-}
-
-.hljs-attr,
-.hljs-attribute,
-.hljs-literal,
-.hljs-meta,
-.hljs-number,
-.hljs-operator,
-.hljs-variable,
-.hljs-selector-attr,
-.hljs-selector-class,
-.hljs-selector-id {
-  /* prettylights-syntax-constant */
-  color: #005cc5
-}
-
-.hljs-regexp,
-.hljs-string,
-.hljs-meta .hljs-string {
-  /* prettylights-syntax-string */
-  color: #032f62
-}
-
-.hljs-built_in,
-.hljs-symbol {
-  /* prettylights-syntax-variable */
-  color: #e36209
-}
-
-.hljs-comment,
-.hljs-code,
-.hljs-formula {
-  /* prettylights-syntax-comment */
-  color: #6a737d
-}
-
-.hljs-name,
-.hljs-quote,
-.hljs-selector-tag,
-.hljs-selector-pseudo {
-  /* prettylights-syntax-entity-tag */
-  color: #22863a
-}
-
-.hljs-subst {
-  /* prettylights-syntax-storage-modifier-import */
-  color: #24292e
-}
-
-.hljs-section {
-  /* prettylights-syntax-markup-heading */
-  color: #005cc5;
-  font-weight: bold
-}
-
-.hljs-bullet {
-  /* prettylights-syntax-markup-list */
-  color: #735c0f
-}
-
-.hljs-emphasis {
-  /* prettylights-syntax-markup-italic */
-  color: #24292e;
-  font-style: italic
-}
-
-.hljs-strong {
-  /* prettylights-syntax-markup-bold */
-  color: #24292e;
-  font-weight: bold
-}
-
-.hljs-addition {
-  /* prettylights-syntax-markup-inserted */
-  color: #22863a;
-  background-color: #f0fff4
-}
-
-.hljs-deletion {
-  /* prettylights-syntax-markup-deleted */
-  color: #b31d28;
-  background-color: #ffeef0
-}
-
-.hljs-char.escape_,
-.hljs-link,
-.hljs-params,
-.hljs-property,
-.hljs-punctuation,
-.hljs-tag {
-  /* purposely ignored */
-
-}
-
-@media (prefers-color-scheme: dark) {
+@layer reset, typography, syntax-highlighting, default, dynamic-typography;
+
+@layer syntax-highlighting {
+  :root {
+    --color-text-pre: #24292e;
+    --color-background-pre: #ffffff;
+    --color-comment-pre: #6a737d;
+    --color-keyword-pre: #d73a49;
+    --color-function-pre: #6f42c1;
+    --color-constant-pre: #005cc5;
+    --color-string-pre: #032f62;
+    --color-builtin-pre: #e36209;
+    --color-tag-pre: #22863a;
+    --color-list-pre: #735c0f;
+    --color-inserted-pre: #22863a;
+    --color-background-inserted-pre: #f0fff4;
+    --color-deleted-pre: #b31d28;
+    --color-background-deleted-pre: #ffeef0;
+  }
 
-  /*!
-    Theme: GitHub Dark
-    Description: Dark theme as seen on github.com
-    Author: github.com
-    Maintainer: @Hirse
-    Updated: 2021-05-15
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --color-text-pre: #c9d1d9;
+      --color-background-pre: #0d1117;
+      --color-comment-pre: #8b949e;
+      --color-keyword-pre: #ff7b72;
+      --color-function-pre: #d2a8ff;
+      --color-constant-pre: #79c0ff;
+      --color-string-pre: #a5d6ff;
+      --color-builtin-pre: #ffa657;
+      --color-tag-pre: #7ee787;
+      --color-list-pre: #f2cc60;
+      --color-inserted-pre: #aff5b4;
+      --color-background-inserted-pre: #033a16;
+      --color-deleted-pre: #ffdcd7;
+      --color-background-deleted-pre: #67060c;
+    }
+  }
 
-    Outdated base version: https://github.com/primer/github-syntax-dark
-    Current colors taken from GitHub's CSS
-  */
-  .hljs {
-    color: #c9d1d9;
-    background: #0d1117
+  pre[class*="language-"] {
+    color: var(--color-text-pre);
+    background: var(--color-background-pre);
   }
 
-  .hljs-doctag,
-  .hljs-keyword,
-  .hljs-meta .hljs-keyword,
-  .hljs-template-tag,
-  .hljs-template-variable,
-  .hljs-type,
-  .hljs-variable.language_ {
-    /* prettylights-syntax-keyword */
-    color: #ff7b72
+  pre[class*="language-"]>code {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
   }
 
-  .hljs-title,
-  .hljs-title.class_,
-  .hljs-title.class_.inherited__,
-  .hljs-title.function_ {
-    /* prettylights-syntax-entity */
-    color: #d2a8ff
+  .token.keyword,
+  .token.atrule,
+  .token.rule,
+  .token.important {
+    color: var(--color-keyword-pre);
   }
 
-  .hljs-attr,
-  .hljs-attribute,
-  .hljs-literal,
-  .hljs-meta,
-  .hljs-number,
-  .hljs-operator,
-  .hljs-variable,
-  .hljs-selector-attr,
-  .hljs-selector-class,
-  .hljs-selector-id {
-    /* prettylights-syntax-constant */
-    color: #79c0ff
+  .token.function,
+  .token.class-name {
+    color: var(--color-function-pre);
   }
 
-  .hljs-regexp,
-  .hljs-string,
-  .hljs-meta .hljs-string {
-    /* prettylights-syntax-string */
-    color: #a5d6ff
+  .token.number,
+  .token.boolean,
+  .token.constant,
+  .token.operator,
+  .token.variable,
+  .token.property,
+  .token.attr-name,
+  .token.entity,
+  .token.doctype,
+  .token.prolog,
+  .token.key {
+    color: var(--color-constant-pre);
   }
 
-  .hljs-built_in,
-  .hljs-symbol {
-    /* prettylights-syntax-variable */
-    color: #ffa657
+  .token.string,
+  .token.char,
+  .token.attr-value,
+  .token.regex,
+  .token.url {
+    color: var(--color-string-pre);
   }
 
-  .hljs-comment,
-  .hljs-code,
-  .hljs-formula {
-    /* prettylights-syntax-comment */
-    color: #8b949e
+  .token.builtin,
+  .token.symbol {
+    color: var(--color-builtin-pre);
   }
 
-  .hljs-name,
-  .hljs-quote,
-  .hljs-selector-tag,
-  .hljs-selector-pseudo {
-    /* prettylights-syntax-entity-tag */
-    color: #7ee787
+  /* also markdown's code, whose language is highlighted inside it */
+  .token.comment,
+  .token.cdata,
+  .token.code-snippet,
+  .token.code.keyword {
+    color: var(--color-comment-pre);
   }
 
-  .hljs-subst {
-    /* prettylights-syntax-storage-modifier-import */
-    color: #c9d1d9
+  .token.tag,
+  .token.selector,
+  .token.blockquote {
+    color: var(--color-tag-pre);
   }
 
-  .hljs-section {
-    /* prettylights-syntax-markup-heading */
-    color: #1f6feb;
-    font-weight: bold
+  /* a markdown heading */
+  .token.title {
+    color: var(--color-constant-pre);
+    font-weight: bold;
   }
 
-  .hljs-bullet {
-    /* prettylights-syntax-markup-list */
-    color: #f2cc60
+  .token.list,
+  .token.checkbox {
+    color: var(--color-list-pre);
   }
 
-  .hljs-emphasis {
-    /* prettylights-syntax-markup-italic */
-    color: #c9d1d9;
-    font-style: italic
+  .token.table-header {
+    color: inherit;
+    font-weight: bold;
   }
 
-  .hljs-strong {
-    /* prettylights-syntax-markup-bold */
-    color: #c9d1d9;
-    font-weight: bold
+  .token.bold {
+    font-weight: bold;
   }
 
-  .hljs-addition {
-    /* prettylights-syntax-markup-inserted */
-    color: #aff5b4;
-    background-color: #033a16
+  .token.italic {
+    font-style: italic;
   }
 
-  .hljs-deletion {
-    /* prettylights-syntax-markup-deleted */
-    color: #ffdcd7;
-    background-color: #67060c
+  .token.strike {
+    text-decoration: line-through;
   }
 
-  .hljs-char.escape_,
-  .hljs-link,
-  .hljs-params,
-  .hljs-property,
-  .hljs-punctuation,
-  .hljs-tag {
-    /* purposely ignored */
+  .token.inserted {
+    color: var(--color-inserted-pre);
+    background-color: var(--color-background-inserted-pre);
+  }
 
+  .token.deleted {
+    color: var(--color-deleted-pre);
+    background-color: var(--color-background-deleted-pre);
   }
-}
+}

package/stylesheets/TypographyStyles.css

@@ -1,4 +1,4 @@
-@layer reset, typography;
+@layer reset, typography, syntax-highlighting;
 
 @layer typography {
 
@@ -63,11 +63,19 @@
 		--fontsize-root: clamp(1rem, 0.875rem + 0.333vw, 1.125rem);
 
 		/*
-			the difference in size of h1 relative to the root
-			font size; increase or decrease this number for larger or
-			smaller headings
+			how much larger h1 is than the root font size, as a multiple
+			of it: 1.5 makes h1 2.5 times the size of body text; increase
+			or decrease this number for larger or smaller headings
+
+			the heading sizes are computed here, on :root, once: set
+			this and the variables below on :root (in a stylesheet linked
+			from one page or folder, for those pages), since setting them
+			on another element changes nothing
 		*/
-		--fontsize-delta: calc(1.5 * var(--fontsize-root));
+		--fontsize-scale: 1.5;
+
+		/* the same difference as a length, which the sizes are computed from */
+		--fontsize-delta: calc(var(--fontsize-scale) * var(--fontsize-root));
 
 		/*
 			the rate of decay from h1 to h6 font size, where h6 is
@@ -232,8 +240,9 @@
 		font-style: italic;
 	}
 
-	nav a:where([aria-current='page'], [aria-current='true']),
-	nav a:where([aria-current='page'], [aria-current='true']):hover {
+	/* the page itself; a folder above it (aria-current=true) is still a link to go to */
+	nav a[aria-current='page'],
+	nav a[aria-current='page']:hover {
 		cursor: default;
 	}
 

package/version.js

@@ -0,0 +1,9 @@
+import { readFileSync } from "node:fs"
+
+/**
+ * This vowel's version, from its package.json: the build cache's key
+ * (config.js) and the pages' `<meta name=generator>`. A module of its
+ * own because config.js imports the plugins, so a plugin can't import
+ * config.js.
+ */
+export const VOWEL_VERSION = JSON.parse(readFileSync(new URL("./package.json", import.meta.url), "utf8")).version