feat: rework two-color-word effect & implement blinking

Instead of overlaying a half of the two-color-word character,
the two-color-word effect is now achieved
by using two half-word pseudo elements (enabled by CSS class .o),
one for the left half (::before; controlled by non-prefixed CSS classes)
and one for the right half (::after; controlled by CSS classes prefixed with 'r'),
so that the two halves of the word can be controlled independently.

Additionally, to make the text selection appear normal,
the real element is made invisible and placed on top of the pseudo elements.

This greatly reduces the number of CSS classes needed.

See Ptt-official-app/pttbbs-web#122
for an explanation of a similar implementation.

The blink effect for two-color-word characters is also implemented.

The background color was dependent on both .b<bg> and .qq<bg> classes,
which complicated the TwoColorWord blinking implementation.

Therefore, the .qq<bg> classes are removed,
while only the .qq class is left since it does not affect the background color.

Since the color of two-color-word characters is now transparent,
the color of hovered hyperlinks is now explicitly assigned as the color of q7
to prevent the link text with the two-color-word effect from being invisible.

src/components/Row/WordSegmentBuilder/ColorSpan.js

@@ -3,7 +3,7 @@ import cx from "classnames";
 export const ColorSpan = ({ className, colorState, inner }) => (
   <span
     className={cx(className, `q${colorState.fg}`, `b${colorState.bg}`, {
-      [`qq${colorState.bg}`]: colorState.blink
+      qq: colorState.blink
     })}
   >
     {inner}

src/components/Row/WordSegmentBuilder/TwoColorWord.js

@@ -2,19 +2,33 @@ import cx from "classnames";
 import { forceWidthStyle } from "./ForceWidthWord";
 
 /**
- * TODO: add blinking.
+ * TwoColorWord implements the two-color-word effect,
+ * where the first half ("head") and the last half ("tail")
+ * of a fullwidth character ("word") have different colors.
+ *
+ * The two-color-word effect is achieved
+ * by using two half-word pseudo elements (enabled by CSS class .o),
+ * one for the left half (::before; controlled by non-prefixed CSS classes)
+ * and one for the right half (::after; controlled by CSS classes prefixed with 'r'),
+ * so that the two halves of the word can be controlled independently.
+ *
+ * Additionally, to make the text selection appear normal,
+ * the real element is made invisible and placed on top of the pseudo elements.
  */
 export const TwoColorWord = ({ colorLead, colorTail, forceWidth, text }) => (
   <span
-    className={cx({
-      [`q${colorLead.fg}`]: colorLead.fg === colorTail.fg,
-      [`w${colorLead.fg}`]: colorLead.fg !== colorTail.fg,
-      [`q${colorTail.fg}`]: colorLead.fg !== colorTail.fg,
-      o: colorLead.fg !== colorTail.fg,
-      [`b${colorLead.bg}`]: colorLead.bg === colorTail.bg,
-      [`b${colorLead.bg}b${colorTail.bg}`]: colorLead.bg !== colorTail.bg,
-      wpadding: forceWidth
-    })}
+    className={cx(
+      "o",
+      `q${colorLead.fg}`,
+      `rq${colorTail.fg}`,
+      `b${colorLead.bg}`,
+      `rb${colorTail.bg}`,
+      {
+        qq: colorLead.blink,
+        rqq: colorTail.blink,
+        wpadding: forceWidth
+      }
+    )}
     style={forceWidthStyle(forceWidth)}
     data-text={text}
   >