Better link styles

Author: pomber

packages/mdx/src/client/inline-code.tsx

@@ -22,6 +22,10 @@ export function InlineCode({
   const { theme } = codeConfig
   const { lines } = code
   const allTokens = lines.flatMap(line => line.tokens)
+  const foreground = getColor(
+    theme,
+    ColorName.CodeForeground
+  )
   return (
     <span
       className={
@@ -32,11 +36,12 @@ export function InlineCode({
     >
       <code
         style={{
+          ["--ch-code-foreground" as any]: foreground,
           background: transparent(
             getColor(theme, ColorName.CodeBackground),
             0.9
           ),
-          color: getColor(theme, ColorName.CodeForeground),
+          color: foreground,
         }}
       >
         {allTokens.map((token, j) => (

packages/mdx/src/client/section.tsx

@@ -74,6 +74,8 @@ export function SectionCode() {
   return <InnerCode {...props} onTabClick={onTabClick} />
 }
 
+// ---
+
 export function SectionLink({
   focus,
   file,
@@ -95,14 +97,8 @@ export function SectionLink({
 
   return (
     <span
-      style={{
-        textDecoration: "underline",
-        textDecorationStyle: "dotted",
-        // cursor: "pointer",
-        backgroundColor: isSelected
-          ? "#bae6fd66"
-          : undefined,
-      }}
+      className="ch-section-link"
+      data-active={isSelected}
       // onClick={handleClick}
       children={children}
       onMouseOver={() =>
@@ -113,8 +109,6 @@ export function SectionLink({
   )
 }
 
-// ---
-
 const LinkableContext = React.createContext<{
   activate: (x: {
     fileName?: string

packages/mdx/src/index.scss

@@ -32,3 +32,17 @@
   border-radius: 0.25em;
   font-size: 0.9em;
 }
+
+.ch-section-link,
+.ch-section-link * {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(
+    --ch-code-foreground,
+    currentColor
+  );
+}
+
+.ch-section-link[data-active="true"] {
+  background-color: #bae6fd66;
+}

packages/playground/content/scrollycoding.mdx

@@ -22,7 +22,7 @@ npm install @next/mdx @mdx-js/loader @code-hike/mdx@next
 
 Create a `next.config.js` file at the root of your project.
 
-Here we use the [_`@next/mdx`_](focus://1,6,8) plugin to set up MDX imports.
+Here we use the [_`require("@next/mdx")`_](focus://1,6,8) plugin to set up MDX imports.
 
 Also, make sure you include `"md"` and `"mdx"` on the _`pageExtensions`_ setting.