From c20ceccab72b42e8889538832ff5a2a75c4b7cdd Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Fri, 19 Dec 2025 09:16:58 -0500
Subject: [PATCH] Thicken adaptive outline for number toppers

---
 classic.js | 38 ++++++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/classic.js b/classic.js
index d18b671..2d2bb30 100644
--- a/classic.js
+++ b/classic.js
@@ -800,23 +800,37 @@ function distinctPaletteSlots(palette) {
             svg('feMergeNode', { in: 'ink' })
           ])
         ]),
-        svg('filter', { id: 'classic-num-outline-dark', 'color-interpolation-filters': 'sRGB', x: '-22%', y: '-22%', width: '144%', height: '144%' }, [
-          svg('feMorphology', { in: 'SourceAlpha', operator: 'dilate', radius: 3.1, result: 'spread' }),
-          svg('feComposite', { in: 'spread', in2: 'SourceAlpha', operator: 'out', result: 'stroke' }),
-          svg('feFlood', { 'flood-color': OUTLINE_DARK, 'flood-opacity': 1, result: 'strokeColor' }),
-          svg('feComposite', { in: 'strokeColor', in2: 'stroke', operator: 'in', result: 'coloredStroke' }),
+        svg('filter', { id: 'classic-num-outline-dark', 'color-interpolation-filters': 'sRGB', x: '-30%', y: '-30%', width: '160%', height: '160%' }, [
+          // Heavy outer stroke
+          svg('feMorphology', { in: 'SourceAlpha', operator: 'dilate', radius: 9, result: 'spreadOuter' }),
+          svg('feComposite', { in: 'spreadOuter', in2: 'SourceAlpha', operator: 'out', result: 'strokeOuter' }),
+          svg('feFlood', { 'flood-color': OUTLINE_DARK, 'flood-opacity': 1, result: 'strokeOuterColor' }),
+          svg('feComposite', { in: 'strokeOuterColor', in2: 'strokeOuter', operator: 'in', result: 'coloredStrokeOuter' }),
+          // Inner reinforcement to avoid gaps
+          svg('feMorphology', { in: 'SourceAlpha', operator: 'dilate', radius: 4.8, result: 'spreadInner' }),
+          svg('feComposite', { in: 'spreadInner', in2: 'SourceAlpha', operator: 'out', result: 'strokeInner' }),
+          svg('feFlood', { 'flood-color': OUTLINE_DARK, 'flood-opacity': 1, result: 'strokeInnerColor' }),
+          svg('feComposite', { in: 'strokeInnerColor', in2: 'strokeInner', operator: 'in', result: 'coloredStrokeInner' }),
           svg('feMerge', {}, [
-            svg('feMergeNode', { in: 'coloredStroke' }),
+            svg('feMergeNode', { in: 'coloredStrokeOuter' }),
+            svg('feMergeNode', { in: 'coloredStrokeInner' }),
             svg('feMergeNode', { in: 'SourceGraphic' })
           ])
         ]),
-        svg('filter', { id: 'classic-num-outline-light', 'color-interpolation-filters': 'sRGB', x: '-22%', y: '-22%', width: '144%', height: '144%' }, [
-          svg('feMorphology', { in: 'SourceAlpha', operator: 'dilate', radius: 3.1, result: 'spread' }),
-          svg('feComposite', { in: 'spread', in2: 'SourceAlpha', operator: 'out', result: 'stroke' }),
-          svg('feFlood', { 'flood-color': OUTLINE_LIGHT, 'flood-opacity': 1, result: 'strokeColor' }),
-          svg('feComposite', { in: 'strokeColor', in2: 'stroke', operator: 'in', result: 'coloredStroke' }),
+        svg('filter', { id: 'classic-num-outline-light', 'color-interpolation-filters': 'sRGB', x: '-30%', y: '-30%', width: '160%', height: '160%' }, [
+          // Heavy outer stroke
+          svg('feMorphology', { in: 'SourceAlpha', operator: 'dilate', radius: 9, result: 'spreadOuter' }),
+          svg('feComposite', { in: 'spreadOuter', in2: 'SourceAlpha', operator: 'out', result: 'strokeOuter' }),
+          svg('feFlood', { 'flood-color': OUTLINE_LIGHT, 'flood-opacity': 1, result: 'strokeOuterColor' }),
+          svg('feComposite', { in: 'strokeOuterColor', in2: 'strokeOuter', operator: 'in', result: 'coloredStrokeOuter' }),
+          // Inner reinforcement to avoid gaps
+          svg('feMorphology', { in: 'SourceAlpha', operator: 'dilate', radius: 4.8, result: 'spreadInner' }),
+          svg('feComposite', { in: 'spreadInner', in2: 'SourceAlpha', operator: 'out', result: 'strokeInner' }),
+          svg('feFlood', { 'flood-color': OUTLINE_LIGHT, 'flood-opacity': 1, result: 'strokeInnerColor' }),
+          svg('feComposite', { in: 'strokeInnerColor', in2: 'strokeInner', operator: 'in', result: 'coloredStrokeInner' }),
           svg('feMerge', {}, [
-            svg('feMergeNode', { in: 'coloredStroke' }),
+            svg('feMergeNode', { in: 'coloredStrokeOuter' }),
+            svg('feMergeNode', { in: 'coloredStrokeInner' }),
             svg('feMergeNode', { in: 'SourceGraphic' })
           ])
         ]),