@abreen/tada 1.16.0 → 1.16.2

package/src/appearance-picker/style.scss

@@ -75,8 +75,10 @@
 }
 
 .font-picker-option-sans {
-  font-family: var(--sans-font);
-  font-feature-settings: var(--sans-font-feature-settings);
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
+    sans-serif;
+  font-feature-settings: normal;
 }
 
 .font-picker-option-serif {
@@ -86,17 +88,13 @@
   font-feature-settings: var(--serif-font-feature-settings);
 }
 
-.material-symbol-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.material-symbol-icon-contrast-standard {
-  --material-symbol-icon: var(--icon-contrast-standard);
+:root:not([data-font-preference='serif']) .font-picker-option-sans {
+  font-family: var(--sans-font);
+  font-feature-settings: var(--sans-font-feature-settings);
 }
 
-.material-symbol-icon-contrast-high {
-  --material-symbol-icon: var(--icon-contrast-high);
+:root[data-font-preference='serif'] .font-picker-option-serif {
+  font-family: var(--serif-font);
 }
 
 .preference-picker-option[aria-pressed='true'] {

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,10 +60,10 @@ header details summary::marker {
 }
 
 header summary::after {
-  flex: 0 0 24px;
+  flex: 0 0 var(--icon-header-menu-size);
   order: -1;
-  width: 24px;
-  height: 24px;
+  width: var(--icon-header-menu-size);
+  height: var(--icon-header-menu-size);
   margin-right: 8px;
   margin-left: var(--gap);
   content: '';
@@ -93,7 +97,10 @@ header summary .site-title {
   margin: 0 8px 0 0;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 500;
+
+  // Values above 500 resolve to the supplied bold face when a custom family
+  // provides only fixed 400 and 700 weights.
+  font-weight: 600;
   white-space: nowrap;
   pointer-events: none;
 }
@@ -150,8 +157,8 @@ header .search-controls {
     top: 50%;
     left: 7px;
     z-index: 1;
-    width: 22px;
-    height: 22px;
+    width: var(--icon-search-size);
+    height: var(--icon-search-size);
     pointer-events: none;
     content: '';
     transform: translateY(-50%);
@@ -165,6 +172,7 @@ header .search-controls {
 
   input.search {
     width: 180px;
+    padding-left: calc(2rem - 1px);
   }
 }
 

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/material-symbols.scss

@@ -1,11 +1,24 @@
 @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));
+}
 
-  display: block;
+.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-heading-anchor {
-  --material-symbol-icon: var(--icon-heading-anchor);
+.material-symbol-icon-contrast-high {
+  --material-symbol-icon: var(--icon-contrast-high);
+  --material-symbol-icon-size: var(--icon-contrast-high-size);
 }

package/src/navigate/runtime.ts

@@ -138,6 +138,18 @@ function isActiveNavigation(controller: AbortController): boolean {
   return currentAbortController === controller && !controller.signal.aborted;
 }
 
+function prefersReducedMotion(window: Window): boolean {
+  if (typeof window.matchMedia !== 'function') {
+    return false;
+  }
+
+  try {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  } catch {
+    return false;
+  }
+}
+
 export function initNavigation(window: Window): void {
   currentAbortController = null;
   historyIndex = 0;
@@ -305,6 +317,7 @@ export async function navigateToUrl(
 
   if (
     useViewTransition &&
+    !prefersReducedMotion(window) &&
     typeof transitionDoc.startViewTransition === 'function'
   ) {
     const titleEl = document.querySelector('.title-and-info');

package/src/question/style.scss

@@ -62,8 +62,7 @@
   margin-bottom: 0;
 }
 
-.question-a-body > *,
-.question-a-body > * * {
+.question-a-body > * {
   @media (prefers-reduced-motion: no-preference) {
     transition:
       color 0.25s,

package/src/search/style.scss

@@ -127,7 +127,9 @@ header {
     }
 
     ol a .title {
-      font-weight: 500;
+      // Values above 500 resolve to the supplied bold face when a custom
+      // family provides only fixed 400 and 700 weights.
+      font-weight: 600;
       line-height: var(--heading-line-height);
     }
 
@@ -138,10 +140,10 @@ header {
 
     ol li .excerpt {
       grid-row-start: 3;
-      height: 7.5ex;
+      height: 4.2em;
       overflow: hidden;
       font-size: var(--font-size-small);
-      line-height: 2.5ex;
+      line-height: 1.4;
       color: var(--fg2-color);
 
       mark {

package/src/style.scss

@@ -3,6 +3,8 @@
 @use 'base';
 @use 'layout';
 @use 'alerts';
+@include theme.custom-font-faces;
+@include theme.custom-font-tuning;
 
 @font-face {
   font-family: Inter;
@@ -93,9 +95,9 @@ a.disabled {
 .external-link-tail::after,
 a.external:not(:has(.external-link-tail))::after {
   display: inline-block;
-  width: 1em;
-  height: 1em;
-  vertical-align: middle;
+  width: var(--icon-external-link-size);
+  height: var(--icon-external-link-size);
+  vertical-align: text-top;
   content: '';
 
   @include contained-mask(var(--icon-external-link));
@@ -272,6 +274,10 @@ ol {
   list-style-type: decimal;
 }
 
+:root[data-font-preference='serif'] ol > li::marker {
+  font-variant-numeric: oldstyle-nums;
+}
+
 ol ol {
   list-style-type: lower-alpha;
 }
@@ -413,8 +419,8 @@ a.breadcrumb {
 
   &::after {
     display: inline-block;
-    width: 1em;
-    height: 1em;
+    width: var(--icon-parent-size);
+    height: var(--icon-parent-size);
     vertical-align: middle;
     content: '';
 

package/src/toc/style.scss

@@ -131,22 +131,26 @@ body.code .toc ol a {
   position: relative;
 }
 
+.toc ol li.alert-item.warning {
+  --toc-alert-icon: var(--icon-warning-compact);
+  --toc-alert-icon-size: var(--icon-warning-compact-size);
+}
+
+.toc ol li.alert-item.note {
+  --toc-alert-icon: var(--icon-info-compact);
+  --toc-alert-icon-size: var(--icon-info-compact-size);
+}
+
 .toc ol li.alert-item.warning a::before,
 .toc ol li.alert-item.note a::before {
   display: inline-block;
-  width: 20px;
-  height: 20px;
+  width: var(--toc-alert-icon-size);
+  height: var(--toc-alert-icon-size);
   margin-right: 4px;
-  vertical-align: bottom;
+  vertical-align: sub;
   content: '';
-}
-
-.toc ol li.alert-item.warning a::before {
-  @include contained-mask(var(--icon-warning));
-}
 
-.toc ol li.alert-item.note a::before {
-  @include contained-mask(var(--icon-info));
+  @include contained-mask(var(--toc-alert-icon));
 }
 
 .toc ol li.label {

package/templates/_appearance-picker.html

@@ -1,17 +1,17 @@
 <div class="appearance-pickers" data-pagefind-ignore>
   <div class="preference-picker font-picker" role="group" aria-label="Font style">
-    <button type="button" class="preference-picker-option font-picker-option-sans" data-font-preference-value="sans" aria-label="Use sans-serif fonts" aria-pressed="true" disabled>
+    <button type="button" class="preference-picker-option font-picker-option-sans" data-font-preference-value="sans" aria-label="Use sans-serif fonts" aria-pressed="<%= site.defaultFont === 'sans' %>" disabled>
       <span aria-hidden="true">Aa</span>
     </button>
-    <button type="button" class="preference-picker-option font-picker-option-serif" data-font-preference-value="serif" aria-label="Use serif fonts" aria-pressed="false" disabled>
+    <button type="button" class="preference-picker-option font-picker-option-serif" data-font-preference-value="serif" aria-label="Use serif fonts" aria-pressed="<%= site.defaultFont === 'serif' %>" disabled>
       <span aria-hidden="true">Aa</span>
     </button>
   </div>
   <div class="preference-picker contrast-picker" role="group" aria-label="Contrast">
-    <button type="button" class="preference-picker-option contrast-picker-option-standard" data-contrast-preference-value="standard" aria-label="Use standard contrast" aria-pressed="true" disabled>
+    <button type="button" class="preference-picker-option contrast-picker-option-standard" data-contrast-preference-value="standard" aria-label="Use standard contrast" aria-pressed="<%= site.defaultContrast === 'standard' %>" disabled>
       <span class="material-symbol-icon material-symbol-icon-contrast-standard" aria-hidden="true"></span>
     </button>
-    <button type="button" class="preference-picker-option contrast-picker-option-high" data-contrast-preference-value="high" aria-label="Use high contrast" aria-pressed="false" disabled>
+    <button type="button" class="preference-picker-option contrast-picker-option-high" data-contrast-preference-value="high" aria-label="Use high contrast" aria-pressed="<%= site.defaultContrast === 'high' %>" disabled>
       <span class="material-symbol-icon material-symbol-icon-contrast-high" aria-hidden="true"></span>
     </button>
   </div>

package/templates/_theme.scss

@@ -1,3 +1,13 @@
+@mixin custom-font-faces {
+  /* Site-configured font faces are inserted below. */
+  /* TADA_CUSTOM_FONT_FACES */
+}
+
+@mixin custom-font-tuning {
+  /* Site-configured font tuning is inserted below. */
+  /* TADA_CUSTOM_FONT_TUNING */
+}
+
 :root {
   --theme-color: <%= themeColorLight %>;
   --theme-color-text: <%= themeColorTextLight %>;
@@ -41,14 +51,14 @@
     'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
     'Segoe UI Symbol';
   --sans-mono-font: 'Google Sans Code', 'Consolas', 'Courier', monospace;
-  --serif-font: 'Source Serif 4', 'Times New Roman', 'Times', serif;
+  --serif-font: <%= serifFontStack %>;
   --serif-preview-font: 'Times New Roman', 'Times', serif;
-  --serif-mono-font: 'Libertinus Mono', 'Courier New', 'Courier', monospace;
+  --serif-mono-font: <%= serifMonoFontStack %>;
   --sans-font-feature-settings:
     'liga', 'calt', 'ss07', 'ss08', 'cv01', 'cv08', 'cv10';
   --sans-mono-font-feature-settings: normal;
-  --serif-font-feature-settings: normal;
-  --serif-mono-font-feature-settings: normal;
+  --serif-font-feature-settings: <%= serifFontFeatureSettings %>;
+  --serif-mono-font-feature-settings: <%= serifMonoFontFeatureSettings %>;
   --font: var(--sans-font);
   --heading-font: var(--font);
   --heading-line-height: 1.3;

package/templates/_top.html

@@ -1,5 +1,9 @@
 <!doctype html>
-<html lang="en">
+<html lang="en"
+      data-default-font-preference="<%= site.defaultFont %>"
+      data-default-contrast-preference="<%= site.defaultContrast %>"<% if (site.defaultFont === 'serif') { %>
+      data-font-preference="serif"<% } %><% if (site.defaultContrast === 'high') { %>
+      data-contrast-preference="high"<% } %>>
   <head>
     <% if (site.features.favicon) { %>
     <link rel="icon" href="/favicon.ico" sizes="any" />
@@ -36,15 +40,47 @@
     <script>
       document.documentElement.classList.add('js');
       try {
-        if (window.localStorage.getItem('fontPreference') === 'serif') {
-          document.documentElement.dataset.fontPreference = 'serif';
+        const preference = window.localStorage.getItem('fontPreference');
+        const configured =
+          document.documentElement.dataset.defaultFontPreference;
+        if (
+          (preference === 'serif' || preference === 'sans') &&
+          preference !== configured
+        ) {
+          if (preference === 'serif') {
+            document.documentElement.dataset.fontPreference = 'serif';
+          } else {
+            delete document.documentElement.dataset.fontPreference;
+          }
         }
       } catch {}
+      let contrastPreference;
       try {
-        if (window.localStorage.getItem('contrastPreference') === 'high') {
-          document.documentElement.dataset.contrastPreference = 'high';
-        }
+        contrastPreference = window.localStorage.getItem('contrastPreference');
       } catch {}
+      const configuredContrast =
+        document.documentElement.dataset.defaultContrastPreference;
+      if (
+        contrastPreference !== 'high' &&
+        contrastPreference !== 'standard'
+      ) {
+        contrastPreference = configuredContrast;
+        if (
+          configuredContrast !== 'high' &&
+          typeof window.matchMedia === 'function'
+        ) {
+          try {
+            if (window.matchMedia('(prefers-contrast: more)').matches) {
+              contrastPreference = 'high';
+            }
+          } catch {}
+        }
+      }
+      if (contrastPreference === 'high') {
+        document.documentElement.dataset.contrastPreference = 'high';
+      } else {
+        delete document.documentElement.dataset.contrastPreference;
+      }
     </script>
     <% if (!isWatchMode) { %>
     <script type="speculationrules">

package/templates/code.html

@@ -3,7 +3,7 @@
 <div class="main-content">
   <main class="body" data-pagefind-body>
     <div class="file-header">
-      <h1 data-pagefind-weight="10" data-pagefind-meta="title_html[data-title-html]" data-title-html="<%- page.titleHtml %>"><%= page.titleHtml %></h1>
+      <h1 class="file-title" data-pagefind-weight="10" data-pagefind-meta="title_html[data-title-html]" data-title-html="<%- page.titleHtml %>"><%= page.titleHtml %></h1>
       <%= render('_download.html') %>
     </div>
     <div class="code-body">

package/assets/material-symbols/contrast_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm40-83q119-15 199.5-104.5T800-480q0-123-80.5-212.5T520-797v634Z"/></svg>

package/assets/material-symbols/contrast_rtl_off_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M819-28 701-146q-48 32-103.5 49T480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-62 17-117.5T146-701L27-820l57-57L876-85l-57 57ZM480-160q45 0 85.5-12t76.5-33L480-367v207Zm335-100-59-59q21-35 32.5-75.5T800-480q0-133-93.5-226.5T480-800v205L260-815q48-31 103.5-48T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 61-17 116.5T815-260Z"/></svg>

package/assets/material-symbols/info_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>

package/assets/material-symbols/north_east_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m216-160-56-56 464-464H360v-80h400v400h-80v-264L216-160Z"/></svg>

package/assets/material-symbols/search_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>

package/assets/material-symbols/south_east_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M360-200v-80h264L160-744l56-56 464 464v-264h80v400H360Z"/></svg>

package/assets/material-symbols/tag_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m240-160 40-160H120l20-80h160l40-160H180l20-80h160l40-160h80l-40 160h160l40-160h80l-40 160h160l-20 80H660l-40 160h160l-20 80H600l-40 160h-80l40-160H360l-40 160h-80Zm140-240h160l40-160H420l-40 160Z"/></svg>

package/assets/material-symbols/warning_24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>