@swiftbrowser/web 0.6.0 → 0.6.2

package/src/symbols.ts

@@ -501,6 +501,9 @@ const BOOKS_VERTICAL_FILL: IconNode = [
   ['rect', { x: '17.8', y: '4.5', width: '4', height: '16', rx: '1.2', stroke: 'none', transform: 'rotate(-14 19.8 12.5)' }],
 ];
 
+/** Marks a `knockout` glyph's inner shape that is filled, not only stroked (`enclosed`). */
+const SOLID_MARK = 'data-sb-knockout-solid';
+
 /** Color used for inner marks of `knockout` glyphs; styles.css sets the variable. */
 const KNOCKOUT_COLOR = 'var(--sb-icon-knockout, var(--sb-color-system-background, #fff))';
 
@@ -957,8 +960,6 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'cloud.snow': outline(CloudSnow),
   'cloud.sun': outline(CloudSun),
   'cloud.sun.fill': solid(CloudSun),
-  'moon.circle.fill': solid(Moon),
-  'sun.max.circle.fill': solid(Sun),
   'person.3': outline(Users),
   'person.3.fill': solid(Users),
   'chart.line.uptrend.xyaxis': outline(TrendingUp),
@@ -1326,7 +1327,9 @@ function resolveVariant(systemName: string): SymbolGlyph | undefined {
     } else {
       const base = parts.slice(0, -1).join('.');
       const glyph = GENERIC_SHAPES.has(base) ? undefined : lookupSymbol(base);
-      if (glyph) return enclosed(glyph.icon, enclosure, fill);
+      // A base whose filled form is a silhouette (`moon.fill`) is knocked
+      // out solid, as `moon.circle.fill` draws its moon.
+      if (glyph) return enclosed(glyph.icon, enclosure, fill, fill && lookupSymbol(`${base}.fill`)?.fill === 'solid');
     }
   }
   const bases: string[] = [];
@@ -1350,13 +1353,17 @@ function resolveVariant(systemName: string): SymbolGlyph | undefined {
 /**
  * `icon` at 55% inside a circle or rounded square: outlined (`X.circle`), or
  * filled with the glyph knocked out of it (`X.circle.fill`), as SF Symbols
- * draw their enclosed forms.
+ * draw their enclosed forms; `solid`, the glyph's shapes are knocked out
+ * whole rather than as strokes.
  */
-function enclosed(icon: IconNode, enclosure: 'circle' | 'square', fill: boolean): SymbolGlyph {
+function enclosed(icon: IconNode, enclosure: 'circle' | 'square', fill: boolean, solid = false): SymbolGlyph {
   const outer: IconNode[number] =
     enclosure === 'circle' ? ['circle', { cx: '12', cy: '12', r: '10' }] : ['rect', { x: '3', y: '3', width: '18', height: '18', rx: '4' }];
   // Scaled about the center; the stroke is widened to keep its weight.
-  const inner = icon.map(([tag, attrs]) => [tag, { ...attrs, transform: 'translate(5.4 5.4) scale(0.55)', 'stroke-width': '3.3' }] as IconNode[number]);
+  const inner = icon.map(
+    ([tag, attrs]) =>
+      [tag, { ...attrs, transform: 'translate(5.4 5.4) scale(0.55)', 'stroke-width': '3.3', ...(solid ? { [SOLID_MARK]: '' } : {}) }] as IconNode[number],
+  );
   return { icon: [outer, ...inner], fill: fill ? 'knockout' : 'outline' };
 }
 
@@ -1421,7 +1428,8 @@ export function renderSymbol(systemName: string): SVGElement | null {
         shape.setAttribute('fill', 'currentColor');
       } else {
         shape.setAttribute('stroke', KNOCKOUT_COLOR);
-        shape.setAttribute('fill', 'none');
+        shape.setAttribute('fill', shape.hasAttribute(SOLID_MARK) ? KNOCKOUT_COLOR : 'none');
+        shape.removeAttribute(SOLID_MARK);
       }
     });
   }