@abreen/tada 1.18.4 → 1.18.5

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,
@@ -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/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.18.5",
   "type": "module",
   "description": "A static site generator",
   "license": "MIT",
@@ -17,7 +17,6 @@
     "build/",
     "src/",
     "templates/",
-    "assets/",
     "fonts/",
     "init/",
     "schema/",

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

@@ -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='3.25' y='5.25' width='17.5' height='13.5' rx='2.25'/><path d='M10.25 9.25v5.5L14.75 12z' fill='black'/>"
+  );
+  @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;
@@ -237,16 +240,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/question/_index.scss

@@ -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/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);
-}