@abreen/tada 1.15.13 → 1.16.1

package/package.json

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

package/schema/site.schema.json

@@ -48,6 +48,16 @@
       "default": 700
     },
     "defaultTimeZone": { "type": "string" },
+    "defaultFont": {
+      "type": "string",
+      "enum": ["sans", "serif"],
+      "default": "sans"
+    },
+    "defaultContrast": {
+      "type": "string",
+      "enum": ["standard", "high"],
+      "default": "standard"
+    },
     "vars": { "type": "object" },
     "extensionToShikiLanguage": {
       "type": "object",

package/src/_alerts.scss

@@ -88,7 +88,7 @@ i.warning {
 }
 
 .alert.note .title::before {
-  @include contained-mask(var(--icon-note));
+  @include contained-mask(var(--icon-info));
 }
 
 .alert .title {

package/src/_base.scss

@@ -33,18 +33,7 @@ body {
   font-family: var(--font);
   font-size: var(--font-size);
   font-weight: var(--font-weight);
-
-  /*
-   * Enable Inter's features:
-   * liga - standard ligatures
-   * calt - contextual alternates
-   * ss07 - square punctuation
-   * ss08 - square quotes
-   * cv01 - alternate 1
-   * cv08 - uppercase I with serif
-   * cv10 - capital G with spur
-   */
-  font-feature-settings: 'liga', 'calt', 'ss07', 'ss08', 'cv01', 'cv08', 'cv10';
+  font-feature-settings: var(--font-feature-settings);
   line-height: var(--line-height);
   color: var(--fg-color);
   background-color: var(--bg-color);
@@ -94,6 +83,7 @@ pre,
 tt,
 code {
   font-family: var(--mono-font);
+  font-feature-settings: var(--mono-font-feature-settings);
 }
 
 tt,
@@ -182,10 +172,6 @@ input[type='search'] {
   min-width: 0;
   padding-left: 2rem;
   background-color: var(--bg-color);
-  background-image: var(--icon-search);
-  background-repeat: no-repeat;
-  background-position: left 6px center;
-  background-size: 16px 16px;
   border-radius: 18px;
 
   &:disabled {

package/src/anchor/index.ts

@@ -2,7 +2,14 @@ function getElements(parent: HTMLElement): HTMLHeadingElement[] {
   return Array.from(parent.querySelectorAll('h1, h2, h3, h4, h5, h6'));
 }
 
-function createIcon(window: Window, type: 'hash' | 'present'): SVGSVGElement {
+function createHeadingAnchorIcon(window: Window): HTMLSpanElement {
+  const icon = window.document.createElement('span');
+  icon.className = 'material-symbol-icon material-symbol-icon-heading-anchor';
+  icon.setAttribute('aria-hidden', 'true');
+  return icon;
+}
+
+function createPresentIcon(window: Window): SVGSVGElement {
   const svg = window.document.createElementNS(
     'http://www.w3.org/2000/svg',
     'svg',
@@ -17,13 +24,10 @@ function createIcon(window: Window, type: 'hash' | 'present'): SVGSVGElement {
   svg.setAttribute('stroke-linecap', 'round');
   svg.setAttribute('stroke-linejoin', 'round');
 
-  const paths =
-    type === 'hash'
-      ? ['M10 3 8 21', 'M16 3l-2 18', 'M4 9h17', 'M3 15h17']
-      : [
-          'M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z',
-          'M9 20h6',
-        ];
+  const paths = [
+    'M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z',
+    'M9 20h6',
+  ];
 
   for (const d of paths) {
     const path = window.document.createElementNS(
@@ -82,7 +86,7 @@ export default (window: Window) => {
       while (el.firstChild) {
         link.appendChild(el.firstChild);
       }
-      link.appendChild(createIcon(window, 'hash'));
+      link.appendChild(createHeadingAnchorIcon(window));
       el.appendChild(link);
 
       const handleClick = () => {
@@ -103,7 +107,7 @@ export default (window: Window) => {
     button.className = 'heading-present-button';
     button.setAttribute('aria-label', 'Present from this slide');
     button.title = 'Present from this slide';
-    button.appendChild(createIcon(window, 'present'));
+    button.appendChild(createPresentIcon(window));
     el.appendChild(button);
 
     const slide = el.parentElement;

package/src/anchor/style.scss

@@ -7,7 +7,7 @@ a.heading-anchor {
   @include subdued-link;
 }
 
-.heading-anchor svg,
+.heading-anchor .material-symbol-icon,
 .heading-present-button svg {
   display: inline-block;
   width: 1em;
@@ -15,7 +15,7 @@ a.heading-anchor {
   vertical-align: middle;
 }
 
-.heading-anchor svg {
+.heading-anchor .material-symbol-icon {
   margin-left: 4px;
   vertical-align: middle;
   opacity: 0;
@@ -39,7 +39,7 @@ a.heading-anchor {
   opacity: 0;
 }
 
-a.heading-anchor:focus-visible svg,
+a.heading-anchor:focus-visible .material-symbol-icon,
 .heading-present-button:focus {
   opacity: 1;
 }
@@ -65,12 +65,12 @@ body.is-presenting .heading-present-button {
     background: transparent;
   }
 
-  h1:hover a.heading-anchor svg,
-  h2:hover a.heading-anchor svg,
-  h3:hover a.heading-anchor svg,
-  h4:hover a.heading-anchor svg,
-  h5:hover a.heading-anchor svg,
-  h6:hover a.heading-anchor svg,
+  h1:hover a.heading-anchor .material-symbol-icon,
+  h2:hover a.heading-anchor .material-symbol-icon,
+  h3:hover a.heading-anchor .material-symbol-icon,
+  h4:hover a.heading-anchor .material-symbol-icon,
+  h5:hover a.heading-anchor .material-symbol-icon,
+  h6:hover a.heading-anchor .material-symbol-icon,
   h1:hover .heading-present-button,
   h2:hover .heading-present-button,
   h3:hover .heading-present-button,
@@ -88,7 +88,7 @@ body.is-presenting .heading-present-button {
 }
 
 @media print {
-  .heading-anchor svg,
+  .heading-anchor .material-symbol-icon,
   .heading-present-button {
     display: none;
   }

package/src/appearance-picker/index.ts

@@ -0,0 +1,214 @@
+export type FontPreference = 'sans' | 'serif';
+export type ContrastPreference = 'standard' | 'high';
+
+const FONT_STORAGE_KEY = 'fontPreference';
+const CONTRAST_STORAGE_KEY = 'contrastPreference';
+
+function getStorage(window: Window): Storage | null {
+  try {
+    return window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+function getStoredPreference<T extends string>(
+  storage: Storage | null,
+  key: string,
+  storedValues: readonly T[],
+  defaultValue: T,
+): T {
+  try {
+    const storedValue = storage?.getItem(key);
+    return storedValues.includes(storedValue as T)
+      ? (storedValue as T)
+      : defaultValue;
+  } catch {
+    return defaultValue;
+  }
+}
+
+function saveStoredPreference<T extends string>(
+  storage: Storage | null,
+  key: string,
+  preference: T,
+  defaultValue: T,
+): void {
+  try {
+    if (preference === defaultValue) {
+      storage?.removeItem(key);
+    } else {
+      storage?.setItem(key, preference);
+    }
+  } catch {
+    // Storage can be unavailable in privacy-restricted contexts.
+  }
+}
+
+export function getFontPreference(
+  storage: Storage | null,
+  defaultValue: FontPreference = 'sans',
+): FontPreference {
+  return getStoredPreference(
+    storage,
+    FONT_STORAGE_KEY,
+    ['sans', 'serif'],
+    defaultValue,
+  );
+}
+
+export function getContrastPreference(
+  storage: Storage | null,
+  defaultValue: ContrastPreference = 'standard',
+): ContrastPreference {
+  return getStoredPreference(
+    storage,
+    CONTRAST_STORAGE_KEY,
+    ['standard', 'high'],
+    defaultValue,
+  );
+}
+
+export function saveFontPreference(
+  storage: Storage | null,
+  preference: FontPreference,
+  defaultValue: FontPreference = 'sans',
+): void {
+  saveStoredPreference(storage, FONT_STORAGE_KEY, preference, defaultValue);
+}
+
+export function saveContrastPreference(
+  storage: Storage | null,
+  preference: ContrastPreference,
+  defaultValue: ContrastPreference = 'standard',
+): void {
+  saveStoredPreference(storage, CONTRAST_STORAGE_KEY, preference, defaultValue);
+}
+
+function getDefaultFontPreference(document: Document): FontPreference {
+  return document.documentElement.dataset.defaultFontPreference === 'serif'
+    ? 'serif'
+    : 'sans';
+}
+
+function getDefaultContrastPreference(document: Document): ContrastPreference {
+  return document.documentElement.dataset.defaultContrastPreference === 'high'
+    ? 'high'
+    : 'standard';
+}
+
+export function applyFontPreference(
+  document: Document,
+  preference: FontPreference,
+): void {
+  if (preference === 'serif') {
+    if (document.documentElement.dataset.fontPreference !== preference) {
+      document.documentElement.dataset.fontPreference = preference;
+    }
+  } else if (document.documentElement.dataset.fontPreference !== undefined) {
+    delete document.documentElement.dataset.fontPreference;
+  }
+}
+
+export function applyContrastPreference(
+  document: Document,
+  preference: ContrastPreference,
+): void {
+  if (preference === 'high') {
+    if (document.documentElement.dataset.contrastPreference !== preference) {
+      document.documentElement.dataset.contrastPreference = preference;
+    }
+  } else if (
+    document.documentElement.dataset.contrastPreference !== undefined
+  ) {
+    delete document.documentElement.dataset.contrastPreference;
+  }
+}
+
+function syncControls(
+  document: Document,
+  selector: string,
+  preference: string,
+): void {
+  document.querySelectorAll<HTMLButtonElement>(selector).forEach(button => {
+    button.disabled = false;
+    button.setAttribute(
+      'aria-pressed',
+      String(
+        button.dataset.fontPreferenceValue === preference ||
+          button.dataset.contrastPreferenceValue === preference,
+      ),
+    );
+  });
+}
+
+function syncAppearance(
+  document: Document,
+  fontPreference: FontPreference,
+  contrastPreference: ContrastPreference,
+): void {
+  syncControls(document, '[data-font-preference-value]', fontPreference);
+  syncControls(
+    document,
+    '[data-contrast-preference-value]',
+    contrastPreference,
+  );
+}
+
+export default function mountAppearancePicker(window: Window): () => void {
+  const { document } = window;
+  const container = document.querySelector<HTMLElement>('.appearance-pickers');
+  if (!container) {
+    return () => {};
+  }
+
+  const buttons = Array.from(
+    container.querySelectorAll<HTMLButtonElement>('button'),
+  );
+  const storage = getStorage(window);
+  const defaultFontPreference = getDefaultFontPreference(document);
+  const defaultContrastPreference = getDefaultContrastPreference(document);
+  let fontPreference = getFontPreference(storage, defaultFontPreference);
+  let contrastPreference = getContrastPreference(
+    storage,
+    defaultContrastPreference,
+  );
+
+  applyFontPreference(document, fontPreference);
+  applyContrastPreference(document, contrastPreference);
+  syncAppearance(document, fontPreference, contrastPreference);
+
+  const handleClick = (event: Event) => {
+    const button = event.currentTarget as HTMLButtonElement;
+    const fontValue = button.dataset.fontPreferenceValue;
+    const contrastValue = button.dataset.contrastPreferenceValue;
+
+    if (fontValue === 'sans' || fontValue === 'serif') {
+      fontPreference = fontValue;
+      saveFontPreference(storage, fontPreference, defaultFontPreference);
+      applyFontPreference(document, fontPreference);
+    } else if (contrastValue === 'standard' || contrastValue === 'high') {
+      contrastPreference = contrastValue;
+      saveContrastPreference(
+        storage,
+        contrastPreference,
+        defaultContrastPreference,
+      );
+      applyContrastPreference(document, contrastPreference);
+    } else {
+      return;
+    }
+
+    syncAppearance(document, fontPreference, contrastPreference);
+  };
+
+  for (const button of buttons) {
+    button.addEventListener('click', handleClick);
+  }
+
+  return () => {
+    for (const button of buttons) {
+      button.removeEventListener('click', handleClick);
+    }
+  };
+}

package/src/appearance-picker/style.scss

@@ -0,0 +1,130 @@
+@use '../mixins' as *;
+
+.appearance-pickers {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  margin: 2rem auto 1rem;
+}
+
+.preference-picker {
+  --preference-picker-option-width: 2.5rem;
+  --preference-picker-gap: 0.5rem;
+  --preference-picker-padding: 6px;
+
+  @include user-select(none);
+
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(2, var(--preference-picker-option-width));
+  gap: var(--preference-picker-gap);
+  width: fit-content;
+  padding: var(--preference-picker-padding);
+  background: var(--bg2-color);
+  border-radius: calc(var(--border-radius) + 4px);
+}
+
+.preference-picker::before {
+  position: absolute;
+  top: var(--preference-picker-padding);
+  bottom: var(--preference-picker-padding);
+  left: var(--preference-picker-padding);
+  width: var(--preference-picker-option-width);
+  content: '';
+  background: var(--bg-color);
+  border-radius: var(--border-radius);
+  box-shadow: 0 0 0 var(--control-border-width) var(--fg2-color);
+  transform: translateX(0);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform 0.2s ease;
+  }
+}
+
+:root[data-font-preference='serif'] .font-picker::before,
+:root[data-contrast-preference='high'] .contrast-picker::before {
+  transform: translateX(calc(100% + var(--preference-picker-gap)));
+}
+
+.preference-picker:has(
+    .preference-picker-option[aria-pressed='true']:is(:hover, :focus)
+  )::before {
+  background: var(--bg2-color);
+}
+
+.preference-picker:has(
+    .preference-picker-option[aria-pressed='true']:active:not(:disabled)
+  )::before {
+  background: var(--link-active-color);
+}
+
+.preference-picker-option {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--preference-picker-option-width);
+  height: 2rem;
+  padding: 0;
+  font-size: var(--font-size-smaller);
+  color: var(--fg2-color);
+  background: transparent;
+  border: 0;
+  border-radius: var(--border-radius);
+}
+
+.font-picker-option-sans {
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
+    sans-serif;
+  font-feature-settings: normal;
+}
+
+.font-picker-option-serif {
+  // Avoid requesting the bundled serif face just to render the inactive
+  // preview on a default sans page.
+  font-family: var(--serif-preview-font);
+  font-feature-settings: var(--serif-font-feature-settings);
+}
+
+:root:not([data-font-preference='serif']) .font-picker-option-sans {
+  font-family: var(--sans-font);
+  font-feature-settings: var(--sans-font-feature-settings);
+}
+
+:root[data-font-preference='serif'] .font-picker-option-serif {
+  font-family: var(--serif-font);
+}
+
+.material-symbol-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.material-symbol-icon-contrast-standard {
+  --material-symbol-icon: var(--icon-contrast-standard);
+}
+
+.material-symbol-icon-contrast-high {
+  --material-symbol-icon: var(--icon-contrast-high);
+}
+
+.preference-picker-option[aria-pressed='true'] {
+  color: var(--fg-color);
+  background: transparent;
+}
+
+.preference-picker-option[aria-pressed='true']:is(:hover, :focus) {
+  background: transparent;
+}
+
+.preference-picker-option[aria-pressed='true']:active:not(:disabled) {
+  background: transparent !important;
+}
+
+@media print {
+  .appearance-pickers {
+    display: none;
+  }
+}

package/src/code.scss

@@ -35,6 +35,7 @@ body.code {
   padding: 0 0.75em;
   margin-right: var(--gap);
   font-family: var(--mono-font);
+  font-feature-settings: var(--mono-font-feature-settings);
   color: var(--fg2-color);
   text-align: right;
   text-decoration: none;

package/src/header/_base.scss

@@ -16,6 +16,10 @@ header {
   view-transition-name: site-header;
 }
 
+:root[data-contrast-preference='high'] header {
+  background: var(--bg-color);
+}
+
 header details summary {
   position: relative;
   display: flex;
@@ -56,15 +60,20 @@ header details summary::marker {
 }
 
 header summary::after {
+  flex: 0 0 24px;
   order: -1;
+  width: 24px;
   height: 24px;
   margin-right: 8px;
   margin-left: var(--gap);
-  content: var(--icon-chevron);
+  content: '';
+
+  @include contained-mask(var(--icon-header-menu));
 }
 
 header details[open] summary::after {
-  transform: rotate(90deg);
+  -webkit-mask-image: var(--icon-header-close);
+  mask-image: var(--icon-header-close);
 }
 
 header .content {
@@ -131,16 +140,35 @@ header .results-container {
 }
 
 header .search-controls {
+  position: relative;
   display: flex;
   align-items: center;
   height: var(--header-collapsed-height);
 
+  @media (width <= 400px) {
+    display: none;
+  }
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 7px;
+    z-index: 1;
+    width: 22px;
+    height: 22px;
+    pointer-events: none;
+    content: '';
+    transform: translateY(-50%);
+
+    @include contained-mask(var(--icon-search));
+  }
+
+  &:has(input:disabled)::before {
+    opacity: 0.4;
+  }
+
   input.search {
     width: 180px;
-
-    @media (width <= 400px) {
-      display: none;
-    }
   }
 }
 

package/src/header/style.scss

@@ -50,10 +50,18 @@ header nav div > p {
   @include user-select(none);
 }
 
+:root[data-contrast-preference='high'] header:has(details[open]) {
+  background: var(--bg2-color);
+}
+
 @media (hover: hover) {
   header:has(details[open]):hover {
     background: var(--bg-color-translucent);
   }
+
+  :root[data-contrast-preference='high'] header:hover {
+    background: var(--bg2-color);
+  }
 }
 
 header .results-container {

package/src/index.ts

@@ -1,5 +1,6 @@
 import './style.scss';
 
+import './material-symbols.scss';
 import './anchor/style.scss';
 import './code.scss';
 import './code/style.scss';
@@ -12,6 +13,7 @@ import './slides/style.scss';
 import './timezone/style.scss';
 import './toc/style.scss';
 import './trace/style.scss';
+import './appearance-picker/style.scss';
 import './navigate/style.scss';
 import './page-update/style.scss';
 

package/src/material-symbols.scss

@@ -0,0 +1,11 @@
+@use 'mixins' as *;
+
+.material-symbol-icon {
+  @include contained-mask(var(--material-symbol-icon));
+
+  display: block;
+}
+
+.material-symbol-icon-heading-anchor {
+  --material-symbol-icon: var(--icon-heading-anchor);
+}

package/src/navigate/lifecycle.ts

@@ -6,6 +6,7 @@ import mountCode from '../code';
 import mountTrace from '../trace';
 import mountPrint from '../print';
 import mountSlides from '../slides';
+import mountAppearancePicker from '../appearance-picker';
 import { scheduleTask } from '../util';
 
 const PER_PAGE_COMPONENTS: Record<
@@ -20,6 +21,7 @@ const PER_PAGE_COMPONENTS: Record<
   trace: mountTrace,
   slides: mountSlides,
   print: mountPrint,
+  appearancePicker: mountAppearancePicker,
 };
 
 let cleanups: (() => void)[] = [];

package/src/search/style.scss

@@ -2,7 +2,6 @@
 
 header {
   .search-controls {
-    display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
     align-items: center;

package/src/slides/style.scss

@@ -94,6 +94,7 @@ body.is-presenting header,
 body.is-presenting .title-and-info,
 body.is-presenting nav.toc,
 body.is-presenting footer,
+body.is-presenting .appearance-pickers,
 body.is-presenting .slides-header,
 body.is-presenting .trace-toolbar {
   display: none;