@abreen/tada 1.18.4 → 1.19.0

package/README.md

@@ -5,37 +5,62 @@
 
 A static site generator. The successor to Presto.
 
+<figure>
+  <a href="https://abreen.io/Tada/markdown.html" target="_blank">
+    <img src=".github/screenshot.png" alt="Four screenshots of the Tada example site">
+  </a>
+  <figcaption>
+    A screenshot of the Tada example site in:
+    <ul>
+      <li>light mode</li>
+      <li>dark mode, high contrast</li>
+      <li>light mode, high contrast, & serif fonts</li>
+      <li>dark mode, standard contrast</li>
+    </ul>
+    </figcaption>
+</figure>
+
+[Visit the example site ↗](https://abreen.io/Tada/index.html)
+
+
 ## Features
 
-- Modern design (light & dark following system, floating header, styled lists)
-- Fast client-side navigation
-- Detects a new version of the current page and allows the user to reload
-- Clickable/linkable landmarks (headings, deflists, alert boxes)
-- Dynamic table of contents
-  * Floats on the side of the screen when window is large enough
-  * Renders headings, alert boxes, and `<hr>` elements
-  * Highlights the heading currently being viewed
+- Modern design
+  * Light & dark mode following system, customizable tint
+  * Standard & high contrast picker
+  * Sans-serif & serif font picker
+  * Plus, provide your own web fonts (with many tuning options)
+
+- LaTeX math support
+  * Provided by [KaTeX][katex]
+  * Rendered completely at build time (zero load time on the client)
+
+- Automatically generated favicon
+  * Text, color, font and font weight taken from config file
+  * Or, provide your own favicon file
+
+- High quality output and ergonomic authoring
+  * Exhaustive internal link validation (broken links fail the build)
+  * External link handling (special visual treatment for external links,
+    no need to type `target="_blank"`)
+  * Internal links automatically prefixed with base path, if specified (no
+    need to keep writing the same URL prefix everywhere)
+
 - Built-in search powered by [Pagefind][pagefind]
   * Only pages in `content/` reachable from `/index.html` are indexed
+  * If `mutool` is installed, text inside PDFs in `content/` is indexed
+
 - Generated HTML pages for source code
   * Automatic code highlighting, clickable line numbers
   * Dynamic table of contents for each method/function
   * Converts new Markdown comment syntax ([added in Java 23][jep467]) to HTML
   * Indexed by Pagefind (classes, interfaces, methods, and fields)
-- Interactive execution traces via `renderTrace()`
-  * Supports Java and Python source files
-  * Renders step-by-step source highlighting, output, and memory diagrams
-- Slides mode: separate content by `---` and present sections as full-screen slides
-  * Click icon near slide titles to start presenting at that slide
-  * Right-click in presentation mode to annotate
-  * Hold Shift while annotating to erase
-- PDF files are copied into `dist/`
-  * Text of each PDF page is extracted using `mutool` (if present) and indexed
-- External link handling (special visual treatment for external links)
-- Internal link validation at build time (broken links fail the build)
-- Internal links automatically prefixed with base path, if specified
-- Time zone chooser (automatically adjusts `<datetime>` elements)
-- LaTeX math rendered at build time via [KaTeX][katex]
+
+- Dynamic table of contents
+  * Floats on the side of the screen when window is large enough
+  * Renders headings, alert boxes, and `<hr>` elements
+  * Highlights the heading currently being viewed
+
 - Extended Markdown syntax
   * `<<< details ... <<<` renders a collapsible box
   * `::: section ... :::` renders a special section with a fancy background
@@ -45,9 +70,26 @@ A static site generator. The successor to Presto.
   * `+++ ... +++ ... +++` renders a two-column layout
   * Special heading subtitles with `## Heading # A subtitle here`
   * `{{{ _partial.md }}}` syntax for including partials
-- Custom header logo from an image in `public/`
-- Automatically generated favicon or custom ICO from `public/`
-  * Text, color, font and font weight taken from config file
+
+- Extremely fast client-side navigation
+  * A miniature SPA without the bloat of a framework
+  * Highly efficient, thoroughly covered by cross-platform browser tests
+  * Also detects a new version of the current page and supplies a reload button
+
+### Experimental features
+
+- Interactive execution traces via `renderTrace()`
+  * Supports Java and Python source files
+  * Renders step-by-step source highlighting, output, and memory diagrams
+
+- Slides mode: separate content by `---` and present sections as full-screen slides
+  * Click icon near slide titles to start presenting at that slide
+  * Right-click in presentation mode to annotate
+  * Hold Shift while annotating to erase
+
+
+
+- Time zone chooser (automatically adjusts `<datetime>` elements)
 
 ## Prerequisites
 
@@ -107,9 +149,11 @@ Visit [http://localhost:8080/index.html](http://localhost:8080/index.html).
 
 Create a new Tada site in a new directory. Prompts for:
 - **Site title**: displayed in the header and `<title>` tag
-- **Symbol**: short text (1-5 uppercase characters) shown in the logo and favicon
-- **Theme color**: HSL color, e.g. `hsl(195 70% 40%)`
-- **Background tint hue**: hue (0-360) for background/foreground tinting (defaults to `33`)
+- **Symbol**: short text (1-5 uppercase characters) shown in the logo and favicon,
+  or a single emoji shown in the logo (defaults to 🎉; emoji symbols turn off
+  generated favicons)
+- **Theme color**: CSS color, e.g. `hsl(195 70% 40%)` (defaults to `darkturquoise`)
+- **Background tint hue**: hue (0-360) for background/foreground tinting (defaults to `190`)
 - **Background tint amount**: percentage (0-100) of tint to apply (defaults to `100`)
 - **Default time zone**: for `<time>` elements (defaults to your system zone)
 - **Production base URL**: e.g. `https://example.edu`
@@ -268,16 +312,16 @@ vars:
 | `title` | Title for the whole site (also used to derive `titlePostfix`) |
 | `titlePostfix` | *Optional*, the string to append to each page's `title` |
 | `banner` | *Optional*, Markdown rendered in a bordered box above every page |
-| `symbol` | Text (1-5 chars) displayed in header when `logo` is absent; also used for generated favicons |
+| `symbol` | Text (1-5 chars) or a single emoji displayed in header when `logo` is absent; also used for generated favicons |
 | `logo` | *Optional*, image path relative to `public/`, replacing the header symbol |
 | `favicon` | *Optional*, `.ico` path relative to `public/`, replacing generated favicons and the web app manifest |
 | `themeColor` | Theme color for the site (e.g., `"tomato"`, `"#c04040"`, `"hsl(195 70% 40%)"`) |
-| `tintHue` | *Optional*, hue (0-360) for background and foreground tinting (default `33`) |
+| `tintHue` | *Optional*, hue (0-360) for background and foreground tinting (default `190`) |
 | `tintAmount` | *Optional*, percentage (0-100) of tint to apply to the neutral palette (default `100`); link saturation stays fixed |
 | `defaultFont` | *Optional*, initial font pairing: `sans` or `serif` (default `sans`) |
 | `defaultContrast` | *Optional*, initial neutral-palette contrast: `standard` or `high` (default `standard`) |
 | `fontOverrides` | *Optional*, custom serif and serif-monospace WOFF2 faces from `public/`; each configured family requires `regular` and may include styled faces, OpenType `features`, and font-specific `tuning` |
-| `faviconSymbol` | *Optional*, the text to use instead of `symbol` in generated favicons |
+| `faviconSymbol` | *Optional*, the text to use instead of `symbol` in generated favicons; required when `symbol` is an emoji and favicons are generated |
 | `features.search` | Enable search UI and Pagefind index generation |
 | `features.favicon` | Enable favicon links and generation (default `true`); `false` also omits custom favicon links |
 | `features.footer` | Show the Tada footer at the bottom of every page |

package/bin/tada.ts

@@ -27,6 +27,7 @@ import {
   resolveSiteConfigFile,
   type SiteEnv,
 } from '../build/config-files';
+import { isEmojiSymbol } from '../build/utils/symbol';
 
 const { version } = packageJson;
 
@@ -75,22 +76,22 @@ interface InitQuestion {
 const INIT_QUESTIONS: Record<string, InitQuestion> = {
   title: {
     prompt: 'Site title',
-    defaultValue: 'Introduction to Computer Science',
+    defaultValue: 'Tada',
     validate: (v: string) => (v ? null : 'Title is required'),
   },
   symbol: {
-    prompt: 'Logo symbol (1-5 uppercase chars)',
-    defaultValue: 'CS 0',
+    prompt: 'Logo symbol (1-5 uppercase chars or one emoji)',
+    defaultValue: '🎉',
     validate: validateSymbol,
   },
   themeColor: {
     prompt: 'Theme color',
-    defaultValue: 'hsl(195 70% 40%)',
+    defaultValue: 'darkturquoise',
     validate: validateColor,
   },
   tintHue: {
     prompt: 'Background tint hue (0-360)',
-    defaultValue: '33',
+    defaultValue: '190',
     validate: validateHue,
   },
   tintAmount: {
@@ -338,6 +339,14 @@ async function initCommand(args: string[]): Promise<void> {
   // Create project directory
   fs.mkdirSync(projectDir);
 
+  // Generated favicons are text-only, so an emoji symbol starts without them
+  const features = {
+    search: true,
+    favicon: !isEmojiSymbol(symbol),
+    footer: true,
+    pickers: true,
+  };
+
   // Generate site configs
   const devConfig = createSiteConfig({
     title,
@@ -349,7 +358,7 @@ async function initCommand(args: string[]): Promise<void> {
     base: 'http://localhost:8080',
     basePath: '/',
     internalDomains: ['localhost'],
-    features: { search: true, favicon: false, footer: true, pickers: true },
+    features,
     extensionToShikiLanguage: bare ? {} : { java: 'java', py: 'python' },
     shikiLanguages: bare ? [] : ['java', 'python', 'html'],
   });
@@ -364,7 +373,7 @@ async function initCommand(args: string[]): Promise<void> {
     base: prodBase,
     basePath: prodBasePath,
     internalDomains: [prodDomain],
-    features: { search: true, favicon: true, footer: true, pickers: true },
+    features,
     extensionToShikiLanguage: bare ? {} : { java: 'java', py: 'python' },
     shikiLanguages: bare ? [] : ['java', 'python', 'html'],
   });

package/bin/validators.ts

@@ -1,5 +1,6 @@
 import timezones from '../src/timezone/timezones.json' with { type: 'json' };
 import type { SiteConfigInput, SiteVariables } from '../build/types';
+import { isValidSymbol } from '../build/utils/symbol';
 
 const SUPPORTED_TIME_ZONES: readonly string[] = timezones.map(tz => tz.value);
 const FALLBACK_TIME_ZONE = 'UTC';
@@ -8,13 +9,13 @@ export function validateSymbol(value: string): string | null {
   if (!value) {
     return 'Symbol is required';
   }
-  if (value.length > 5) {
-    return 'Symbol must be 5 characters or fewer';
+  if (isValidSymbol(value)) {
+    return null;
   }
-  if (!/^[A-Z0-9\- ]{1,5}$/.test(value)) {
-    return 'Symbol must contain only uppercase letters, digits, hyphens, and spaces';
+  if (value.length > 5) {
+    return 'Symbol must be 5 characters or fewer, or a single emoji';
   }
-  return null;
+  return 'Symbol must contain only uppercase letters, digits, hyphens, and spaces, or be a single emoji';
 }
 
 export function validateColor(value: string): string | null {

package/build/bundle.ts

@@ -12,7 +12,6 @@ import type { PluginBuilder } from 'bun';
 import type { SiteVariables } from './types';
 import timezones from '../src/timezone/timezones.json' with { type: 'json' };
 import pkg from '../package.json' with { type: 'json' };
-import { renderMaterialSymbolVariables } from './material-symbols';
 import {
   getSerifFontStack,
   getSerifMonoFontStack,
@@ -52,7 +51,7 @@ function renderThemeScss(siteVariables: SiteVariables): string {
   const templatePath = path.join(getPackageDir(), 'templates/_theme.scss');
   const template = fs.readFileSync(templatePath, 'utf-8');
   const theme = deriveTheme(siteVariables.themeColor);
-  const tintHue = siteVariables.tintHue ?? 33;
+  const tintHue = siteVariables.tintHue ?? 190;
   const tintAmount = siteVariables.tintAmount ?? 100;
 
   const linkHue = formatCssNumber(deriveLinkHue(tintHue));
@@ -63,7 +62,6 @@ function renderThemeScss(siteVariables: SiteVariables): string {
   const traceLineActiveHue = formatCssNumber(deriveTraceLineActiveHue(tintHue));
   const bgTraceLineActive = `hsl(${traceLineActiveHue}deg 100% 86%)`;
   const bgTraceLineActiveDark = `hsl(${traceLineActiveHue}deg 90% 18%)`;
-  const materialSymbolVariables = renderMaterialSymbolVariables();
   const customFontFaces = renderCustomFontFaceScss(siteVariables.fontOverrides);
   const customFontTuning = renderCustomFontTuningScss(
     siteVariables.fontOverrides,
@@ -90,8 +88,7 @@ function renderThemeScss(siteVariables: SiteVariables): string {
   });
   const rendered = renderedTemplate
     .replace('/* TADA_CUSTOM_FONT_FACES */', customFontFaces)
-    .replace('/* TADA_CUSTOM_FONT_TUNING */', customFontTuning)
-    .replace('/* TADA_MATERIAL_SYMBOL_VARIABLES */', materialSymbolVariables);
+    .replace('/* TADA_CUSTOM_FONT_TUNING */', customFontTuning);
 
   return rendered;
 }

package/build/config-loader.ts

@@ -29,6 +29,14 @@ export function parseConfigText(text: string, fileName: string): unknown {
   try {
     return Bun.YAML.parse(text);
   } catch (error) {
+    // YAML rejects JSON surrogate pair escapes such as emoji in `\ud83c\udf89` form
+    if (fileName.endsWith('.json')) {
+      try {
+        return JSON.parse(text);
+      } catch {
+        // Report the YAML error, as for any other config
+      }
+    }
     const message = error instanceof Error ? error.message : String(error);
     throw new Error(`${fileName}: ${message}`, { cause: error });
   }

package/build/site-variables.ts

@@ -4,6 +4,7 @@ import type { SiteEnv } from './config-files';
 import { loadSiteConfig } from './config-loader';
 import { compile as compileJsonSchema, doValidation } from './json-schema';
 import { getProjectDir } from './utils/paths';
+import { isEmojiSymbol } from './utils/symbol';
 import type { PlainTextLanguage, SiteVariables } from './types';
 import siteSchema from '../schema/site.schema.json' with { type: 'json' };
 import timezones from '../src/timezone/timezones.json' with { type: 'json' };
@@ -131,10 +132,7 @@ function getSiteVariables(env: SiteEnv): SiteVariables {
     },
   } as SiteVariables;
 
-  // Derive faviconSymbol from symbol if not explicitly set
-  if (variables.symbol && !variables.faviconSymbol) {
-    variables.faviconSymbol = variables.symbol;
-  }
+  resolveFaviconSymbol(variables, fileName);
 
   // Derive faviconColor from themeColor if not explicitly set
   if (!variables.faviconColor) {
@@ -157,6 +155,28 @@ function getSiteVariables(env: SiteEnv): SiteVariables {
   return variables;
 }
 
+/**
+ * Derive faviconSymbol from a text symbol. Generated favicons are drawn with a
+ * text font that has no emoji, so an emoji symbol needs a text faviconSymbol.
+ */
+export function resolveFaviconSymbol(
+  variables: SiteVariables,
+  fileName: string,
+): void {
+  if (!variables.symbol || variables.faviconSymbol) {
+    return;
+  }
+  if (!isEmojiSymbol(variables.symbol)) {
+    variables.faviconSymbol = variables.symbol;
+    return;
+  }
+  if (variables.features.favicon !== false && !variables.favicon) {
+    throw new Error(
+      `${fileName}: faviconSymbol is required when symbol is an emoji and favicons are generated; set faviconSymbol to 1 to 5 uppercase characters, digits, hyphens, or spaces`,
+    );
+  }
+}
+
 export function getDevSiteVariables(): SiteVariables {
   return getSiteVariables('dev');
 }

package/build/template-globals.ts

@@ -1,4 +1,5 @@
 import { encodePublicAssetPath } from './custom-fonts';
+import { isEmojiSymbol } from './utils/symbol';
 import timezones from '../src/timezone/timezones.json' with { type: 'json' };
 import type { SiteVariables } from './types';
 
@@ -26,6 +27,7 @@ interface TemplateGlobals {
   cx: (obj: Record<string, unknown>) => string;
   encodeAuthoredUrl: (value: string) => string;
   encodePublicAssetPath: (value: string) => string;
+  isEmojiSymbol: (value: string | null | undefined) => boolean;
   renderTimeZoneChooser: () => string;
 }
 
@@ -56,6 +58,7 @@ export default function createTemplateGlobals(
     cx: classNames,
     encodeAuthoredUrl,
     encodePublicAssetPath,
+    isEmojiSymbol,
     renderTimeZoneChooser,
   };
 }

package/build/utils/symbol.ts

@@ -0,0 +1,21 @@
+// One emoji: a flag, keycap, subdivision flag, or pictograph with optional
+// skin tone and ZWJ joins. Written for the `u` flag so the site schema (Ajv)
+// can share it; `\p{RGI_Emoji}` needs the `v` flag.
+const EMOJI = String.raw`\p{RI}\p{RI}|[#*0-9]\uFE0F\u20E3|\u{1F3F4}[\u{E0061}-\u{E007A}]+\u{E007F}|(?!\p{RI})(?:\p{Emoji_Presentation}|\p{Extended_Pictographic}\uFE0F)\p{Emoji_Modifier}?(?:\u200D(?:\p{Emoji_Presentation}|\p{Extended_Pictographic}\uFE0F?)\p{Emoji_Modifier}?)*`;
+
+/** Must match `faviconSymbol` in `schema/site.schema.json` */
+export const TEXT_SYMBOL_PATTERN = '^[A-Z0-9\\- ]{1,5}$';
+
+/** Must match `symbol` in `schema/site.schema.json` */
+export const SYMBOL_PATTERN = `^(?:[A-Z0-9\\- ]{1,5}|${EMOJI})$`;
+
+const SYMBOL_RE = new RegExp(SYMBOL_PATTERN, 'u');
+const EMOJI_RE = new RegExp(`^(?:${EMOJI})$`, 'u');
+
+export function isValidSymbol(value: string): boolean {
+  return SYMBOL_RE.test(value);
+}
+
+export function isEmojiSymbol(value: string | null | undefined): boolean {
+  return value != null && EMOJI_RE.test(value);
+}

package/build/utils/trace-core.ts

@@ -277,11 +277,11 @@ export function renderTraceWidgetHtml({
   manifestUrl?: string;
   totalSteps?: number;
 }): string {
-  const svgAttrs = `aria-hidden='true' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'`;
-  const iconFirst = `<svg xmlns='http://www.w3.org/2000/svg' ${svgAttrs}><line x1='2' y1='6' x2='2' y2='18'/><polyline points='10 6 4 12 10 18'/><line x1='4' y1='12' x2='22' y2='12'/></svg>`;
-  const iconPrev = `<svg xmlns='http://www.w3.org/2000/svg' ${svgAttrs}><polyline points='10 6 4 12 10 18'/><line x1='4' y1='12' x2='22' y2='12'/></svg>`;
-  const iconNext = `<svg xmlns='http://www.w3.org/2000/svg' ${svgAttrs}><line x1='2' y1='12' x2='20' y2='12'/><polyline points='14 6 20 12 14 18'/></svg>`;
-  const iconLast = `<svg xmlns='http://www.w3.org/2000/svg' ${svgAttrs}><line x1='2' y1='12' x2='20' y2='12'/><polyline points='14 6 20 12 14 18'/><line x1='22' y1='6' x2='22' y2='18'/></svg>`;
+  const svgAttrs = `aria-hidden='true' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'`;
+  const iconFirst = `<svg xmlns='http://www.w3.org/2000/svg' ${svgAttrs}><path d='M1.25 4v8M8.25 4l-4 4 4 4M4.25 8h10.5'/></svg>`;
+  const iconPrev = `<svg xmlns='http://www.w3.org/2000/svg' ${svgAttrs}><path d='M6.25 4l-4 4 4 4M2.25 8h11.5'/></svg>`;
+  const iconNext = `<svg xmlns='http://www.w3.org/2000/svg' ${svgAttrs}><path d='M2.25 8h11.5M9.75 4l4 4-4 4'/></svg>`;
+  const iconLast = `<svg xmlns='http://www.w3.org/2000/svg' ${svgAttrs}><path d='M1.25 8h10.5M7.75 4l4 4-4 4M14.75 4v8'/></svg>`;
   const disabled = totalSteps === undefined;
   const counterContent = disabled ? '--' : `1/${totalSteps}`;
   const counterStyle = disabled

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abreen/tada",
-  "version": "1.18.4",
+  "version": "1.19.0",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",
@@ -17,7 +17,6 @@
     "build/",
     "src/",
     "templates/",
-    "assets/",
     "fonts/",
     "init/",
     "schema/",

package/schema/site.schema.json

@@ -31,14 +31,17 @@
     },
     "title": { "type": "string" },
     "banner": { "type": "string" },
-    "symbol": { "type": "string", "pattern": "^[A-Z0-9\\- ]{1,5}$" },
+    "symbol": {
+      "type": "string",
+      "pattern": "^(?:[A-Z0-9\\- ]{1,5}|\\p{RI}\\p{RI}|[#*0-9]\\uFE0F\\u20E3|\\u{1F3F4}[\\u{E0061}-\\u{E007A}]+\\u{E007F}|(?!\\p{RI})(?:\\p{Emoji_Presentation}|\\p{Extended_Pictographic}\\uFE0F)\\p{Emoji_Modifier}?(?:\\u200D(?:\\p{Emoji_Presentation}|\\p{Extended_Pictographic}\\uFE0F?)\\p{Emoji_Modifier}?)*)$"
+    },
     "titlePostfix": { "type": "string" },
     "themeColor": { "type": "string" },
     "tintHue": {
       "type": "integer",
       "minimum": 0,
       "maximum": 360,
-      "default": 33
+      "default": 190
     },
     "tintAmount": {
       "type": "integer",

package/src/_base.scss

@@ -220,8 +220,8 @@ input[type='checkbox'] {
 
   &::after {
     display: block;
-    width: 1.1em;
-    height: 1.1em;
+    width: var(--icon-check-size);
+    height: var(--icon-check-size);
     content: '';
     background-color: currentcolor;
     opacity: 0;

package/src/_content.scss

@@ -184,7 +184,7 @@ button.icon-button:focus {
 
 ol.styled-list,
 ul.styled-list {
-  font-weight: 700;
+  font-weight: 600;
   color: var(--theme-color-text);
 }
 
@@ -392,7 +392,7 @@ dfn {
     font-weight: 700;
   }
 
-  .material-symbol-icon {
+  .mask-icon {
     flex-shrink: 0;
   }
 }

package/src/_icons.scss

@@ -0,0 +1,115 @@
+@use 'mixins' as *;
+
+@mixin define-icon($name, $size, $body) {
+  --icon-#{$name}: #{icon-svg($size, $body)};
+  --icon-#{$name}-size: #{$size}px;
+}
+
+// Mask icons (color-agnostic, painted via background-color: currentColor)
+:root {
+  @include define-icon(
+    'external-link',
+    20,
+    "<path d='M9 4H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-3M10 10l6-6M12 4h4v4'/>"
+  );
+  @include define-icon(
+    'search',
+    20,
+    "<circle cx='8.5' cy='8.5' r='5'/><path d='m12 12 4.5 4.5'/>"
+  );
+
+  // Thinner stripes keep the striped half lighter than the solid one. Stripe
+  // ends sit on the outline so their caps blend into it.
+  @include define-icon(
+    'contrast-standard',
+    20,
+    "<circle cx='10' cy='10' r='7'/><path d='M5.333 4.783v10.435M7.167 3.599v12.802M9 3.072v13.856' stroke-width='1.25'/>"
+  );
+
+  // One filled path: the outline's outer edge minus the right of its
+  // inner edge, so the solid half and the outline share no seam.
+  @include define-icon(
+    'contrast-high',
+    20,
+    "<path d='M10 2.175a7.825 7.825 0 1 1 0 15.65 7.825 7.825 0 1 1 0-15.65zM9.825 3.827A6.175 6.175 0 1 1 9.825 16.173z' fill='black' fill-rule='evenodd' stroke='none'/>"
+  );
+
+  // Outlines of a serif "i" and an exclamation point, with no enclosing shape.
+  // The compact versions fill smaller glyphs inside a thin circle or triangle,
+  // since outlined glyphs that small would leave almost no space inside.
+  @include define-icon(
+    'info',
+    40,
+    "<circle cx='20' cy='10' r='3'/><path d='M14.5 17 22.5 16v14h3v3.5h-11V30h3V19.5h-3z'/>"
+  );
+  @include define-icon(
+    'info-compact',
+    20,
+    "<circle cx='10' cy='10' r='7.75' stroke-width='1'/><g fill='black' stroke='none'><circle cx='10' cy='6.5' r='1.1'/><path d='M8 9 11 8.5v5h1v1H8v-1h1V10H8z'/></g>"
+  );
+  @include define-icon(
+    'warning',
+    40,
+    "<path d='M17 9a3 3 0 0 1 6 0l-1.25 14.5a1.75 1.75 0 0 1-3.5 0z'/><circle cx='20' cy='31' r='2.5'/>"
+  );
+  @include define-icon(
+    'warning-compact',
+    20,
+    "<path d='M10 2.5 2 16.75h16z' stroke-width='1'/><g fill='black' stroke='none'><path d='M8.9 8.1a1.1 1.1 0 0 1 2.2 0l-.4 3.5a.7.7 0 0 1-1.4 0z'/><circle cx='10' cy='14.1' r='1.05'/></g>"
+  );
+  @include define-icon(
+    'breadcrumb-separator',
+    24,
+    "<path d='m9.25 6.5 5.5 5.5-5.5 5.5'/>"
+  );
+  @include define-icon(
+    'heading-present',
+    24,
+    "<rect x='4' y='5' width='16' height='11' rx='1'/><path d='M12 16v4M9 20h6'/>"
+  );
+  @include define-icon(
+    'check',
+    18,
+    "<path d='M3.75 9.375 7.5 12.75l6.75-7.5'/>"
+  );
+  @include define-icon(
+    'question-correct',
+    22,
+    "<circle cx='11' cy='11' r='9'/><path d='m6.5 11.5 3.25 3 5.75-6.5'/>"
+  );
+  @include define-icon(
+    'question-incorrect',
+    22,
+    "<path d='m6.5 6.5 9 9m0-9-9 9'/>"
+  );
+}
+
+.mask-icon {
+  display: block;
+  width: var(--mask-icon-size);
+  height: var(--mask-icon-size);
+
+  @include contained-mask(var(--mask-icon));
+}
+
+.mask-icon-heading-present {
+  --mask-icon: var(--icon-heading-present);
+  --mask-icon-size: var(--icon-heading-present-size);
+}
+
+.mask-icon-contrast-standard {
+  --mask-icon: var(--icon-contrast-standard);
+  --mask-icon-size: var(--icon-contrast-standard-size);
+}
+
+.mask-icon-contrast-high {
+  --mask-icon: var(--icon-contrast-high);
+  --mask-icon-size: var(--icon-contrast-high-size);
+}
+
+.mask-icon-breadcrumb-separator {
+  --mask-icon: var(--icon-breadcrumb-separator);
+  --mask-icon-size: var(--icon-breadcrumb-separator-size);
+
+  color: var(--fg2-color);
+}

package/src/_layout.scss

@@ -112,7 +112,10 @@ body.literate main table {
     min-width: 400px;
     margin: 1rem auto;
   }
+}
 
+// Screen only: in print the TOC is hidden, so the content takes the full width
+@media screen and (width >= 900px) {
   :not(.toc-is-active) > .container > .main-content {
     max-width: var(--main-width);
     margin: 0 auto;
@@ -142,7 +145,7 @@ body.literate main table {
   }
 }
 
-@media (width >= 1300px) {
+@media screen and (width >= 1300px) {
   .toc-is-active .main-content {
     max-width: calc(var(--toc-width) + var(--gap) + 960px);
     margin: 0 auto;
@@ -217,6 +220,7 @@ body.literate main table {
 footer {
   @include user-select(none);
 
+  font-size: var(--font-size-smaller);
   color: var(--fg2-color);
   text-align: center;
 
@@ -237,16 +241,5 @@ footer {
     &:active {
       color: var(--link-active-color);
     }
-
-    &::after {
-      display: inline-block;
-      width: var(--icon-tada-size);
-      height: var(--icon-tada-size);
-      margin-left: 0.2em;
-      vertical-align: middle;
-      content: '';
-
-      @include contained-mask(var(--icon-tada));
-    }
   }
 }

package/src/_mixins.scss

@@ -48,3 +48,11 @@
   -webkit-mask-size: contain;
   mask-size: contain;
 }
+
+// Every icon is drawn in a viewBox matching its rendered pixel size, so this
+// one stroke width renders identically on every icon.
+$icon-stroke-width: 1.65;
+
+@function icon-svg($size, $body) {
+  @return url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$size}' height='#{$size}' viewBox='0 0 #{$size} #{$size}' fill='none' stroke='black' stroke-width='#{$icon-stroke-width}' stroke-linecap='round' stroke-linejoin='round'>#{$body}</svg>");
+}

package/src/anchor/index.ts

@@ -4,7 +4,7 @@ function getElements(parent: HTMLElement): HTMLHeadingElement[] {
 
 function createPresentIcon(window: Window): HTMLSpanElement {
   const icon = window.document.createElement('span');
-  icon.className = 'material-symbol-icon material-symbol-icon-heading-present';
+  icon.className = 'mask-icon mask-icon-heading-present';
   icon.setAttribute('aria-hidden', 'true');
   return icon;
 }

package/src/header/_index.scss

@@ -184,6 +184,17 @@ header summary .logo {
   background: var(--theme-color);
 }
 
+// A single emoji is the logo itself: no badge, sized like an image logo
+header summary .logo-emoji {
+  padding: 0;
+  font-family:
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
+  font-size: 22px;
+  font-weight: normal;
+  line-height: 24px;
+  background: none;
+}
+
 header summary .logo-image {
   flex: 0 0 auto;
   width: auto;

package/src/question/_index.scss

@@ -21,7 +21,7 @@
 .question-a-label {
   flex: 0 0 var(--question-label-width);
   margin: 0;
-  font-weight: 700;
+  font-weight: 600;
   color: var(--theme-color-text);
 
   @include user-select(none);
@@ -129,10 +129,10 @@
 
 .question-multiple-choice {
   --question-correct-color: hsl(142deg 58% 36%);
-  --question-correct-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='1.5'/><path d='M7 12.5 10.5 16 17 8.5' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  --question-correct-icon: var(--icon-question-correct);
   --question-incorrect-color: hsl(0deg 72% 48%);
-  --question-incorrect-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 7 17 17 M17 7 7 17' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'/></svg>");
-  --question-result-icon-size: 1.35em;
+  --question-incorrect-icon: var(--icon-question-incorrect);
+  --question-result-icon-size: var(--icon-question-correct-size);
 }
 
 @media (prefers-color-scheme: dark) {

package/src/slides/_index.scss

@@ -7,20 +7,20 @@
 
 body.is-presenting {
   --slides-annotation-cursor-light:
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(45 12 12)'%3E%3Crect x='10' y='4.8' width='4' height='13.2' rx='2' fill='white' stroke='black' stroke-width='1.5'/%3E%3Cline x1='12' y1='18' x2='12' y2='20.8' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(45 12 12)'%3E%3Crect x='10' y='4.8' width='4' height='13.2' rx='2' fill='white' stroke='black' stroke-width='#{$icon-stroke-width}'/%3E%3Cline x1='12' y1='18' x2='12' y2='20.8' stroke='black' stroke-width='#{$icon-stroke-width}' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
       6 18,
     crosshair;
   --slides-annotation-cursor-dark:
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(45 12 12)'%3E%3Crect x='10' y='4.8' width='4' height='13.2' rx='2' fill='black' stroke='white' stroke-width='1.5'/%3E%3Cline x1='12' y1='18' x2='12' y2='20.8' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(45 12 12)'%3E%3Crect x='10' y='4.8' width='4' height='13.2' rx='2' fill='black' stroke='white' stroke-width='#{$icon-stroke-width}'/%3E%3Cline x1='12' y1='18' x2='12' y2='20.8' stroke='white' stroke-width='#{$icon-stroke-width}' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
       6 18,
     crosshair;
   --slides-annotation-cursor: var(--slides-annotation-cursor-light);
   --slides-eraser-cursor-light:
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)'%3E%3Cpath d='M6 10 Q6 8.5 7.5 8.5 H16.5 Q18 8.5 18 10 V14 Q18 15.5 16.5 15.5 H7.5 Q6 15.5 6 14 Z' fill='white' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cline x1='10' y1='8.5' x2='10' y2='15.5' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)'%3E%3Cpath d='M6 10 Q6 8.5 7.5 8.5 H16.5 Q18 8.5 18 10 V14 Q18 15.5 16.5 15.5 H7.5 Q6 15.5 6 14 Z' fill='white' stroke='black' stroke-width='#{$icon-stroke-width}' stroke-linejoin='round'/%3E%3Cline x1='10' y1='8.5' x2='10' y2='15.5' stroke='black' stroke-width='#{$icon-stroke-width}' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
       12 12,
     cell;
   --slides-eraser-cursor-dark:
-    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)'%3E%3Cpath d='M6 10 Q6 8.5 7.5 8.5 H16.5 Q18 8.5 18 10 V14 Q18 15.5 16.5 15.5 H7.5 Q6 15.5 6 14 Z' fill='black' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cline x1='10' y1='8.5' x2='10' y2='15.5' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-45 12 12)'%3E%3Cpath d='M6 10 Q6 8.5 7.5 8.5 H16.5 Q18 8.5 18 10 V14 Q18 15.5 16.5 15.5 H7.5 Q6 15.5 6 14 Z' fill='black' stroke='white' stroke-width='#{$icon-stroke-width}' stroke-linejoin='round'/%3E%3Cline x1='10' y1='8.5' x2='10' y2='15.5' stroke='white' stroke-width='#{$icon-stroke-width}' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E")
       12 12,
     cell;
   --slides-eraser-cursor: var(--slides-eraser-cursor-light);

package/src/style.scss

@@ -11,7 +11,7 @@
 @use 'alerts';
 @use 'fonts';
 @use 'content';
-@use 'material-symbols';
+@use 'icons';
 @use 'anchor';
 @use 'code';
 @use 'literate';

package/src/timezone/index.ts

@@ -271,8 +271,8 @@ export default (window: Window) => {
     resetBtn.type = 'button';
     resetBtn.innerHTML =
       '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">' +
-      '<line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>' +
-      '<line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>' +
+      '<line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="1.65" stroke-linecap="round"/>' +
+      '<line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="1.65" stroke-linecap="round"/>' +
       '</svg>';
     resetBtn.className = 'icon-button';
 

package/templates/_appearance-picker.html

@@ -6,10 +6,10 @@
   </button>
   <button type="button" class="preference-picker contrast-picker" role="switch" data-contrast-preference-switch aria-label="Use high contrast" aria-checked="<%= site.defaultContrast === 'high' %>" title="<%= site.defaultContrast === 'high' ? 'Use standard contrast' : 'Use high contrast' %>" disabled>
     <span class="preference-picker-option contrast-picker-option-standard" data-contrast-preference-value="standard" aria-hidden="true">
-      <span class="material-symbol-icon material-symbol-icon-contrast-standard"></span>
+      <span class="mask-icon mask-icon-contrast-standard"></span>
     </span>
     <span class="preference-picker-option contrast-picker-option-high" data-contrast-preference-value="high" aria-hidden="true">
-      <span class="material-symbol-icon material-symbol-icon-contrast-high"></span>
+      <span class="mask-icon mask-icon-contrast-high"></span>
     </span>
   </button>
 </div>

package/templates/_heading.html

@@ -4,12 +4,12 @@
     <ol>
       <% page.breadcrumbs.forEach((entry, index) => { %>
       <li>
-        <% if (index > 0) { %><span class="material-symbol-icon material-symbol-icon-breadcrumb-separator" aria-hidden="true"></span><% } %>
+        <% if (index > 0) { %><span class="mask-icon mask-icon-breadcrumb-separator" aria-hidden="true"></span><% } %>
         <a href="<%- encodeAuthoredUrl(entry.url) %>"><%- entry.label %></a>
       </li>
       <% }); %>
       <li>
-        <span class="material-symbol-icon material-symbol-icon-breadcrumb-separator" aria-hidden="true"></span>
+        <span class="mask-icon mask-icon-breadcrumb-separator" aria-hidden="true"></span>
         <span aria-current="page"><%- page.title %></span>
       </li>
     </ol>

package/templates/_theme.scss

@@ -79,11 +79,6 @@
   --mono-border-radius: 0.375em;
   --mono-padding: 0.12em 0.25em;
 
-  // SVG icons
-  // Mask icons (color-agnostic, painted via background-color: currentColor)
-  --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M5 12.5 10 17 19 7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
-  /* TADA_MATERIAL_SYMBOL_VARIABLES */
-
   color-scheme: light dark;
 }
 

package/templates/_top.html

@@ -23,7 +23,7 @@
     <link rel="apple-touch-icon" sizes="512x512" href="/favicon-512.png" />
     <link rel="apple-touch-icon" sizes="256x256" href="/favicon-256.png" />
     <link rel="manifest" href="/manifest.json" />
-    <meta name="apple-mobile-web-app-title" content="<%- site.symbol %>">
+    <meta name="apple-mobile-web-app-title" content="<%- site.title %>">
     <meta name="mobile-web-app-capable" content="yes">
     <% } %>
     <% } %>
@@ -219,7 +219,7 @@
             <path class="menu-icon-line menu-icon-line-middle" d="M3 12h18" />
             <path class="menu-icon-line menu-icon-line-bottom" d="M3 18h18" />
           </svg>
-          <% if (site.logo) { %><img class="logo-image" src="/<%- encodePublicAssetPath(site.logo) %>" alt="" aria-hidden="true" /><% } else if (site.symbol) { %><span class="logo" aria-hidden="true"><%- site.symbol %></span><% } %>
+          <% if (site.logo) { %><img class="logo-image" src="/<%- encodePublicAssetPath(site.logo) %>" alt="" aria-hidden="true" /><% } else if (site.symbol) { %><span class="<%- isEmojiSymbol(site.symbol) ? 'logo logo-emoji' : 'logo' %>" aria-hidden="true"><%- site.symbol %></span><% } %>
           <span class="header-title" aria-hidden="true">
             <span class="header-title-reel">
               <span class="site-title"><%- site.title %></span>

package/assets/material-symbols/celebration_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m96.85-94.15 184.77-517.54 332.77 332.77L96.85-94.15ZM206.69-204l288-102-186-184-102 286Zm358.93-245.69-37.08-35.08 226.77-226.77q31.15-31.15 74.54-31.15 43.38 0 74.53 31.15l20.77 22.77-35.53 35.08-20.77-20.77q-17.62-17.62-39.23-17.62-21.62 0-39.24 17.62L565.62-449.69ZM413.31-602l-37.08-37.08 26-24q17.69-17.69 17.69-41.46T402.23-746l-26.46-26.46 37.08-35.08 24.46 24.46q32 32 32 78.54 0 46.54-32 78.54l-24 24Zm76.15 76.15-37.08-35.07 144.77-144.77q17.62-17.62 17.62-39.23 0-21.62-17.62-39.23l-62.77-60.77L571.46-882l60.77 62.77q31.92 31.92 31.92 75.31 0 43.38-31.92 75.3L489.46-525.85Zm152.31 152.31-37.08-35.08 53.7-53.69q32.76-32.77 79.3-32.77T817-462.31l53.69 53.69-37.07 35.08-51.7-51.69q-18.46-18.46-43.23-18.46-24.77 0-43.23 18.46l-53.69 51.69ZM206.69-204Z"/></svg>

package/assets/material-symbols/chevron_right_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>

package/assets/material-symbols/contrast_20px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M334.22-133.34q-68.23-29.34-119.86-80.92-51.63-51.58-80.99-119.76Q104-402.19 104-480.37q0-78.17 29.34-145.91 29.34-67.73 80.92-119.36 51.58-51.63 119.76-80.99Q402.19-856 480.37-856q78.17 0 145.91 29.34 67.73 29.34 119.36 80.92 51.63 51.58 80.99 119.26Q856-558.81 856-480.63q0 78.17-29.34 146.41-29.34 68.23-80.92 119.86-51.58 51.63-119.26 80.99Q558.81-104 480.63-104q-78.17 0-146.41-29.34ZM490-160.69q127.62-8.08 217.81-98.35T798-480q0-130.69-89.42-220.19-89.43-89.5-218.58-99.12v638.62Z"/></svg>

package/assets/material-symbols/contrast_rtl_off_20px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="m798.38-95.77-88.3-88.31q-50.46 37.39-108.68 58.73Q543.17-104 480-104q-77.34 0-145.88-29.37-68.54-29.37-119.96-80.79-51.42-51.42-80.79-119.96Q104-402.66 104-480q0-63.17 21.35-121.4 21.34-58.22 58.73-108.68l-68.62-68.61L156-819.23l682.92 682.92-40.54 40.54ZM480-162q51.77 0 99.62-17.15 47.84-17.16 89.46-46.93L480-415.15V-162Zm317-116.69-41.77-40.77Q776-358.23 787-398.48q11-40.25 11-81.52 0-133-92.5-225.5T480-798v202.31L278.69-797q44.8-28.66 96.09-43.83Q426.07-856 480-856q78.59 0 146.84 28.85Q695.1-798.3 746.7-746.7q51.6 51.6 80.45 119.86Q856-558.59 856-480q0 53.93-15.17 105.22T797-278.69Z"/></svg>

package/assets/material-symbols/info_20px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M452-292h58v-236h-58v236Zm49.35-309.61q9.27-8.7 9.27-21.54 0-12.85-8.7-21.93-8.69-9.07-21.53-9.07-12.85 0-21.93 8.69t-9.08 21.54q0 12.84 8.89 21.92 8.88 9.08 21.34 9.08 12.47 0 21.74-8.69ZM480.41-104q-77.59 0-146.17-29.36-68.57-29.36-120.02-80.76-51.45-51.4-80.83-119.88Q104-402.47 104-480.32q0-78.11 29.42-146.42 29.42-68.3 80.92-119.91 51.5-51.62 119.87-80.48Q402.59-856 480.32-856q78.1 0 146.4 28.84 68.29 28.84 119.92 80.42 51.63 51.58 80.49 120.07Q856-558.19 856-480.33q0 77.87-28.84 146.11-28.84 68.23-80.41 119.78-51.57 51.55-120.03 81Q558.25-104 480.41-104Zm-.41-58q132.51 0 225.26-92.74Q798-347.49 798-480t-92.74-225.26Q612.51-798 480-798t-225.26 92.74Q162-612.51 162-480t92.74 225.26Q347.49-162 480-162Zm0-318Z"/></svg>

package/assets/material-symbols/info_40px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M456.05-289.33h51.18V-520h-51.18v230.67Zm44.42-304.49q8.71-8.18 8.71-20.67 0-13.3-8.37-21.4-8.37-8.11-20.62-8.11-13.52 0-21.45 7.93-7.92 7.93-7.92 20.89 0 12.91 8.58 21.23 8.57 8.31 20.47 8.31 11.9 0 20.6-8.18ZM480.01-98.67q-79.35 0-148.51-30.19-69.17-30.19-120.78-81.76-51.61-51.57-81.83-120.81-30.22-69.24-30.22-148.77 0-79.03 30.25-148.6t82.04-121.42q51.8-51.85 120.76-81.48 68.97-29.63 148.18-29.63 79.07 0 148.84 29.6 69.77 29.6 121.48 81.42 51.71 51.82 81.41 121.55 29.7 69.73 29.7 148.84 0 79.62-29.6 148.33-29.6 68.72-81.41 120.42-51.8 51.7-121.52 82.1-69.71 30.4-148.79 30.4Zm.32-51.18q137.11 0 233.46-96.43 96.36-96.44 96.36-234.05 0-137.11-96.23-233.46-96.23-96.36-233.92-96.36-137.28 0-233.72 96.23-96.43 96.23-96.43 233.92 0 137.28 96.43 233.72 96.44 96.43 234.05 96.43ZM480-480Z"/></svg>

package/assets/material-symbols/open_in_new_20px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M234.62-152q-35.05 0-58.83-23.79Q152-199.57 152-234.62v-490.76q0-35.05 23.79-58.83Q199.57-808 234.62-808h233.61v58H234.62q-9.24 0-16.93 7.69-7.69 7.69-7.69 16.93v490.76q0 9.24 7.69 16.93 7.69 7.69 16.93 7.69h490.76q9.24 0 16.93-7.69 7.69-7.69 7.69-16.93v-233.61h58v233.61q0 35.05-23.79 58.83Q760.43-152 725.38-152H234.62Zm150.92-192.23-41.31-41.31L708.69-750H595v-58h213v213h-58v-113.69L385.54-344.23Z"/></svg>

package/assets/material-symbols/search_20px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M769.38-151.85 529.92-391.31q-30 22.54-70.29 34.54-40.29 12-77.06 12-96.95 0-165.11-68.15-68.15-68.16-68.15-165.08 0-96.92 68.15-165.08 68.16-68.15 165.08-68.15 96.92 0 165.08 68.15 68.15 68.16 68.15 165.11 0 39.08-11.77 76.87-11.77 37.79-33.77 67.48l240.46 240.47-41.31 41.3ZM382.54-402.77q74.61 0 124.92-50.31 50.31-50.3 50.31-124.92t-50.31-124.92q-50.31-50.31-124.92-50.31-74.62 0-124.92 50.31-50.31 50.3-50.31 124.92t50.31 124.92q50.3 50.31 124.92 50.31Z"/></svg>

package/assets/material-symbols/smart_display_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M386-310.92 649.08-480 386-649.08v338.16ZM184.62-176q-38.35 0-64.48-26.14Q94-228.27 94-266.62v-426.76q0-38.35 26.14-64.48Q146.27-784 184.62-784h590.76q38.35 0 64.48 26.14Q866-731.73 866-693.38v426.76q0 38.35-26.14 64.48Q813.73-176 775.38-176H184.62Zm0-66h590.76q9.24 0 16.93-7.69 7.69-7.69 7.69-16.93v-426.76q0-9.24-7.69-16.93-7.69-7.69-16.93-7.69H184.62q-9.24 0-16.93 7.69-7.69 7.69-7.69 16.93v426.76q0 9.24 7.69 16.93 7.69 7.69 16.93 7.69ZM160-242v-476 476Z"/></svg>

package/assets/material-symbols/warning_20px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" width="20"><path d="M65.23-142 480-830l414.77 688H65.23ZM169-200h622L480-718 169-200Zm335.35-62.44q10.27-10.06 10.27-23.35 0-13.29-10.06-23.56t-23.35-10.27q-13.29 0-23.56 10.06t-10.27 23.35q0 13.29 10.06 23.56t23.35 10.27q13.29 0 23.56-10.06ZM452-364.62h58v-196h-58v196ZM480-459Z"/></svg>

package/assets/material-symbols/warning_40px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 -960 960 960" width="40"><path d="M74.56-132 480-830.67 885.44-132H74.56Zm89.08-51.18h632.72L480-728.31 163.64-183.18Zm339.4-62.64q8.96-9.08 8.96-20.91t-9.21-21.13q-9.21-9.29-21.24-9.29-12.04 0-21 9.42t-8.96 21.25q0 11.84 9.21 20.79t21.24 8.95q12.04 0 21-9.08Zm-46.83-92.23h51.17v-210.46h-51.17v210.46ZM480-456.08Z"/></svg>

package/build/material-symbols.ts

@@ -1,138 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { getPackageDir } from './utils/paths';
-
-export const MATERIAL_SYMBOL_CONFIG = Object.freeze({
-  family: 'Material Symbols Outlined',
-  fill: 0,
-  weight: 200,
-  grade: 200,
-  opticalSizes: Object.freeze([20, 24, 40] as const),
-  viewBox: '0 -960 960 960',
-  source: 'https://fonts.google.com/icons',
-} as const);
-
-export const MATERIAL_SYMBOLS = Object.freeze({
-  tada: Object.freeze({
-    cssVariable: '--icon-tada',
-    symbol: 'celebration',
-    opticalSize: 24,
-  }),
-  contrastStandard: Object.freeze({
-    cssVariable: '--icon-contrast-standard',
-    symbol: 'contrast_rtl_off',
-    opticalSize: 20,
-  }),
-  contrastHigh: Object.freeze({
-    cssVariable: '--icon-contrast-high',
-    symbol: 'contrast',
-    opticalSize: 20,
-  }),
-  info: Object.freeze({
-    cssVariable: '--icon-info',
-    symbol: 'info',
-    opticalSize: 40,
-  }),
-  infoCompact: Object.freeze({
-    cssVariable: '--icon-info-compact',
-    symbol: 'info',
-    opticalSize: 20,
-  }),
-  warning: Object.freeze({
-    cssVariable: '--icon-warning',
-    symbol: 'warning',
-    opticalSize: 40,
-  }),
-  warningCompact: Object.freeze({
-    cssVariable: '--icon-warning-compact',
-    symbol: 'warning',
-    opticalSize: 20,
-  }),
-  breadcrumbSeparator: Object.freeze({
-    cssVariable: '--icon-breadcrumb-separator',
-    symbol: 'chevron_right',
-    opticalSize: 24,
-    // The authored selection differs from the shared weight/grade defaults.
-    weight: 400,
-    grade: 0,
-  }),
-  search: Object.freeze({
-    cssVariable: '--icon-search',
-    symbol: 'search',
-    opticalSize: 20,
-  }),
-  externalLink: Object.freeze({
-    cssVariable: '--icon-external-link',
-    symbol: 'open_in_new',
-    opticalSize: 20,
-  }),
-  headingPresent: Object.freeze({
-    cssVariable: '--icon-heading-present',
-    symbol: 'smart_display',
-    opticalSize: 24,
-  }),
-} as const);
-
-type MaterialSymbol = (typeof MATERIAL_SYMBOLS)[keyof typeof MATERIAL_SYMBOLS];
-
-interface RenderMaterialSymbolOptions {
-  packageDir?: string;
-  readFile?: (filePath: string) => string;
-}
-
-function getAssetPath(packageDir: string, symbol: MaterialSymbol): string {
-  return path.join(
-    packageDir,
-    'assets/material-symbols',
-    `${symbol.symbol}_${symbol.opticalSize}px.svg`,
-  );
-}
-
-function isConfiguredSvg(
-  svg: string,
-  opticalSize: MaterialSymbol['opticalSize'],
-): boolean {
-  const svgTag = svg.match(/<svg\b[^>]*>/)?.[0];
-  if (!svgTag) {
-    return false;
-  }
-
-  const hasAttribute = (name: string, value: string) =>
-    new RegExp(`\\b${name}=["']${value}["']`).test(svgTag);
-
-  return (
-    hasAttribute('width', String(opticalSize)) &&
-    hasAttribute('height', String(opticalSize)) &&
-    hasAttribute('viewBox', MATERIAL_SYMBOL_CONFIG.viewBox)
-  );
-}
-
-export function renderMaterialSymbolVariables({
-  packageDir = getPackageDir(),
-  readFile = filePath => fs.readFileSync(filePath, 'utf8'),
-}: RenderMaterialSymbolOptions = {}): string {
-  return Object.values(MATERIAL_SYMBOLS)
-    .map(symbol => {
-      const assetPath = getAssetPath(packageDir, symbol);
-      let svg: string;
-
-      try {
-        svg = readFile(assetPath);
-      } catch (error) {
-        throw new Error(
-          `Material Symbol "${symbol.symbol}" could not be read from ${assetPath}`,
-          { cause: error },
-        );
-      }
-
-      if (!isConfiguredSvg(svg, symbol.opticalSize)) {
-        throw new Error(
-          `Material Symbol "${symbol.symbol}" does not match the configured ${symbol.opticalSize}px SVG format: ${assetPath}`,
-        );
-      }
-
-      const dataUri = `data:image/svg+xml,${encodeURIComponent(svg.trim())}`;
-      return `  ${symbol.cssVariable}: url("${dataUri}");\n  ${symbol.cssVariable}-size: ${symbol.opticalSize}px;`;
-    })
-    .join('\n');
-}

package/src/_material-symbols.scss

@@ -1,31 +0,0 @@
-@use 'mixins' as *;
-
-.material-symbol-icon {
-  display: block;
-  width: var(--material-symbol-icon-size);
-  height: var(--material-symbol-icon-size);
-
-  @include contained-mask(var(--material-symbol-icon));
-}
-
-.material-symbol-icon-heading-present {
-  --material-symbol-icon: var(--icon-heading-present);
-  --material-symbol-icon-size: var(--icon-heading-present-size);
-}
-
-.material-symbol-icon-contrast-standard {
-  --material-symbol-icon: var(--icon-contrast-standard);
-  --material-symbol-icon-size: var(--icon-contrast-standard-size);
-}
-
-.material-symbol-icon-contrast-high {
-  --material-symbol-icon: var(--icon-contrast-high);
-  --material-symbol-icon-size: var(--icon-contrast-high-size);
-}
-
-.material-symbol-icon-breadcrumb-separator {
-  --material-symbol-icon: var(--icon-breadcrumb-separator);
-  --material-symbol-icon-size: var(--icon-breadcrumb-separator-size);
-
-  color: var(--fg2-color);
-}