styling(links): use classesTextLink, with red colors in dark mode

Author: adaptive-shield-matrix

lib/interactive/link/LinkText.tsx

@@ -1,4 +1,5 @@
 import { splitProps } from "solid-js"
+import { classesTextLink } from "~ui/classes/classesTextLink"
 import type { LinkTextProps } from "~ui/interactive/link/LinkTextProps"
 import { classMerge } from "~ui/utils/classMerge"
 
@@ -8,7 +9,8 @@ export function LinkText(p: LinkTextProps) {
     <a
       href={p.href}
       class={classMerge(
-        "text-blue-500 no-underline hover:underline", // colors
+        classesTextLink,
+        "no-underline hover:underline", // underline
         "break-all", // line breaks
         p.class,
       )}

lib/static/lists/BlueBulletPoint.tsx

@@ -1,8 +1,8 @@
 import { type ComponentProps, splitProps } from "solid-js"
+import { classesTextLink } from "~ui/classes/classesTextLink"
 import { classMerge } from "~ui/utils/classMerge"
 
-export interface BlueBulletPointProps extends ComponentProps<"span"> {
-}
+export interface BlueBulletPointProps extends ComponentProps<"span"> {}
 
 export function BlueBulletPoint(p: BlueBulletPointProps) {
   const [, rest] = splitProps(p, ["class"])
@@ -11,8 +11,9 @@ export function BlueBulletPoint(p: BlueBulletPointProps) {
       class={classMerge(
         "text-xs select-none", // font
         "mr-1 mt-1.5", // spacing
-        "text-blue-500", // color
-        p.class)}
+        classesTextLink,
+        p.class,
+      )}
       style={{ "font-size": "0.5rem" }}
       aria-hidden={true}
       {...rest}