fix: keep jlpt underline stable during Yomitan lookup

changes/jlpt-underline-yomitan.md

@@ -0,0 +1,4 @@
+type: fixed
+area: overlay
+
+- Kept JLPT underline colors stable during Yomitan hover and selection states, even when tokens also use known, N+1, name-match, or frequency styling.

src/renderer/style.css

@@ -423,11 +423,11 @@ body.settings-modal-open #subtitleContainer {
 }
 
 #subtitleRoot .word.word-jlpt-n1 {
-  text-decoration-line: underline;
+  --subtitle-jlpt-underline-color: var(--subtitle-jlpt-n1-color, #ed8796);
-  text-decoration-thickness: 2px;
+  border-bottom: 2px solid var(--subtitle-jlpt-underline-color);
-  text-underline-offset: 4px;
+  padding-bottom: 1px;
-  text-decoration-color: var(--subtitle-jlpt-n1-color, #ed8796);
+  box-decoration-break: clone;
-  text-decoration-style: solid;
+  -webkit-box-decoration-break: clone;
 }
 
 #subtitleRoot .word.word-jlpt-n1[data-jlpt-level]::after {
@@ -435,11 +435,11 @@ body.settings-modal-open #subtitleContainer {
 }
 
 #subtitleRoot .word.word-jlpt-n2 {
-  text-decoration-line: underline;
+  --subtitle-jlpt-underline-color: var(--subtitle-jlpt-n2-color, #f5a97f);
-  text-decoration-thickness: 2px;
+  border-bottom: 2px solid var(--subtitle-jlpt-underline-color);
-  text-underline-offset: 4px;
+  padding-bottom: 1px;
-  text-decoration-color: var(--subtitle-jlpt-n2-color, #f5a97f);
+  box-decoration-break: clone;
-  text-decoration-style: solid;
+  -webkit-box-decoration-break: clone;
 }
 
 #subtitleRoot .word.word-jlpt-n2[data-jlpt-level]::after {
@@ -447,11 +447,11 @@ body.settings-modal-open #subtitleContainer {
 }
 
 #subtitleRoot .word.word-jlpt-n3 {
-  text-decoration-line: underline;
+  --subtitle-jlpt-underline-color: var(--subtitle-jlpt-n3-color, #f9e2af);
-  text-decoration-thickness: 2px;
+  border-bottom: 2px solid var(--subtitle-jlpt-underline-color);
-  text-underline-offset: 4px;
+  padding-bottom: 1px;
-  text-decoration-color: var(--subtitle-jlpt-n3-color, #f9e2af);
+  box-decoration-break: clone;
-  text-decoration-style: solid;
+  -webkit-box-decoration-break: clone;
 }
 
 #subtitleRoot .word.word-jlpt-n3[data-jlpt-level]::after {
@@ -459,11 +459,11 @@ body.settings-modal-open #subtitleContainer {
 }
 
 #subtitleRoot .word.word-jlpt-n4 {
-  text-decoration-line: underline;
+  --subtitle-jlpt-underline-color: var(--subtitle-jlpt-n4-color, #a6e3a1);
-  text-decoration-thickness: 2px;
+  border-bottom: 2px solid var(--subtitle-jlpt-underline-color);
-  text-underline-offset: 4px;
+  padding-bottom: 1px;
-  text-decoration-color: var(--subtitle-jlpt-n4-color, #a6e3a1);
+  box-decoration-break: clone;
-  text-decoration-style: solid;
+  -webkit-box-decoration-break: clone;
 }
 
 #subtitleRoot .word.word-jlpt-n4[data-jlpt-level]::after {
@@ -471,11 +471,11 @@ body.settings-modal-open #subtitleContainer {
 }
 
 #subtitleRoot .word.word-jlpt-n5 {
-  text-decoration-line: underline;
+  --subtitle-jlpt-underline-color: var(--subtitle-jlpt-n5-color, #8aadf4);
-  text-decoration-thickness: 2px;
+  border-bottom: 2px solid var(--subtitle-jlpt-underline-color);
-  text-underline-offset: 4px;
+  padding-bottom: 1px;
-  text-decoration-color: var(--subtitle-jlpt-n5-color, #8aadf4);
+  box-decoration-break: clone;
-  text-decoration-style: solid;
+  -webkit-box-decoration-break: clone;
 }
 
 #subtitleRoot .word.word-jlpt-n5[data-jlpt-level]::after {

src/renderer/subtitle-render.test.ts

@@ -686,9 +686,14 @@ test('JLPT CSS rules use underline-only styling in renderer stylesheet', () => {
   for (let level = 1; level <= 5; level += 1) {
     const block = extractClassBlock(cssText, `#subtitleRoot .word.word-jlpt-n${level}`);
     assert.ok(block.length > 0, `word-jlpt-n${level} class should exist`);
-    assert.match(block, /text-decoration-line:\s*underline;/);
+    assert.match(
-    assert.match(block, /text-decoration-thickness:\s*2px;/);
+      block,
-    assert.match(block, /text-underline-offset:\s*4px;/);
+      new RegExp(`--subtitle-jlpt-underline-color:\\s*var\\(--subtitle-jlpt-n${level}-color,`),
+    );
+    assert.match(block, /border-bottom:\s*2px solid var\(--subtitle-jlpt-underline-color\);/);
+    assert.match(block, /padding-bottom:\s*1px;/);
+    assert.match(block, /box-decoration-break:\s*clone;/);
+    assert.match(block, /-webkit-box-decoration-break:\s*clone;/);
     assert.doesNotMatch(block, /(?:^|\n)\s*color\s*:/m);
   }
 
@@ -828,18 +833,17 @@ test('JLPT CSS rules use underline-only styling in renderer stylesheet', () => {
     jlptOnlyHoverBlock,
     /-webkit-text-fill-color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
   );
+
+  const jlptOnlySelectionBlock = extractClassBlock(
+    cssText,
+    '#subtitleRoot .word:is(.word-jlpt-n1, .word-jlpt-n2, .word-jlpt-n3, .word-jlpt-n4, .word-jlpt-n5):not(.word-known):not(.word-n-plus-one):not(.word-name-match):not(.word-frequency-single):not(.word-frequency-band-1):not(.word-frequency-band-2):not(.word-frequency-band-3):not(.word-frequency-band-4):not(.word-frequency-band-5)::selection',
+  );
   assert.match(
-    extractClassBlock(
+    jlptOnlySelectionBlock,
-      cssText,
-      '#subtitleRoot .word:is(.word-jlpt-n1, .word-jlpt-n2, .word-jlpt-n3, .word-jlpt-n4, .word-jlpt-n5):not(.word-known):not(.word-n-plus-one):not(.word-name-match):not(.word-frequency-single):not(.word-frequency-band-1):not(.word-frequency-band-2):not(.word-frequency-band-3):not(.word-frequency-band-4):not(.word-frequency-band-5)::selection',
-    ),
     /color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
   );
   assert.match(
-    extractClassBlock(
+    jlptOnlySelectionBlock,
-      cssText,
-      '#subtitleRoot .word:is(.word-jlpt-n1, .word-jlpt-n2, .word-jlpt-n3, .word-jlpt-n4, .word-jlpt-n5):not(.word-known):not(.word-n-plus-one):not(.word-name-match):not(.word-frequency-single):not(.word-frequency-band-1):not(.word-frequency-band-2):not(.word-frequency-band-3):not(.word-frequency-band-4):not(.word-frequency-band-5)::selection',
-    ),
     /-webkit-text-fill-color:\s*var\(--subtitle-hover-token-color,\s*#f4dbd6\)\s*!important;/,
   );