\n Body copy with an inline link in a sentence.\n
\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Link"]}," always renders a real ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[""]}," — but for anything that isn't an"," ","external URL (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["http(s):"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mailto:"]},") or a bare ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#fragment"]},", that ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[""]}," comes"," ","from Redocly's own routing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Link"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@redocly/theme/components/Link/Link"]},"),"," ","not a plain one. This matters, not just cosmetically: Redocly's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Link"]}," ","resolves relative paths against the current route, rewrites the path for the"," ","current locale (so ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href=\"/docs/concepts/\""]}," correctly becomes"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/ja/docs/concepts/"]}," for a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/ja/..."]}," visitor instead of silently bouncing"," ","them to the English page), and drives client-side navigation plus"," ","hover-prefetch instead of a full page load. Writing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href=\"/docs/concepts/\""]}," ","gets all of that automatically — there's no separate \"internal\" prop to set."," ","A control that acts rather than navigates is a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Button"]},", even if it's meant"," ","to look like a link."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"props","__idx":2},"children":["Props"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Prop"},"children":["Prop"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Values"},"children":["Values"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Notes"},"children":["Notes"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["intention"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["brand"]}," | ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["neutral"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["brand"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["brand"]}," = XRPL green. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["neutral"]}," = black/white, no distinct hover, sage ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":visited"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["context"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["on-theme"]}," | ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["on-inverse"]}," | ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["on-saturated"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["on-theme"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Which surface the link sits on — controls both color group and focus-ring color. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["neutral"]}," + ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["on-saturated"]}," is a compile-time type error (no such combination exists in the spec)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variation"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inline"]}," | ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["standalone"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inline"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inline"]}," sits inside running text: no fixed size (inherits the parent's font-size/line-height), no icon, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["display: inline"]}," so it wraps. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["standalone"]}," is a link acting as its own element (a card's \"Read More\", a CTA under a paragraph): fixed size, optional trailing icon, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["display: inline-flex"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["size"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sm"]}," | ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["md"]}," | ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lg"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["md"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Only affects ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["standalone"]}," — ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inline"]}," always inherits from its parent."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iconEnd"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Trailing arrow, from the shared icon set (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shared/components/Icons"]},") -- ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["XrplArrowInternalLinkIcon"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["XrplArrowExternalLinkIcon"]}," when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["target=\"_blank\""]}," is set. Only rendered when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["variation=\"standalone\""]},"; ignored on ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["inline"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["href"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["—"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required."]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Everything else (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["target"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rel"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["aria-*"]},", ...) passes through to"," ","the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[""]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["There's no ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disabled"]}," state — the old component had one, but the new spec"," ","forbids it (ADR-XRPL-012): a disabled link is a contradiction, since a link"," ","that can't be followed shouldn't render as a link."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"color-groups--intention--context","__idx":3},"children":["Color groups → intention × context"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"intention"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["intention"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"context"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["context"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Result"},"children":["Result"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["brand"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["on-theme"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["XRPL green rest/hover, sage ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":visited"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["brand"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["on-inverse"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Green-on-dark-surface variant (e.g. a link inside a dark card on a light page)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["brand"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["on-saturated"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black-on-green (e.g. a link inside a solid-green banner)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["neutral"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["on-theme"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Black (light) / white (dark), flat across hover/active, sage ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":visited"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["neutral"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["on-inverse"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Neutral tuned for a dark card on a light page"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Every resolved value lives in one place: ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"../../../styles/_link-tokens.scss"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_link-tokens.scss"]}]},"'s"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["xrpl-link-colors($group)"]}," mixin. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Link"]},"'s own stylesheet"," ","(",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"_link.scss"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["_link.scss"]}]},") just calls it per ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--intention"]}," class"," ","(",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".xrpl-link--brand"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".xrpl-link--neutral-on-inverse"]},", etc.) — it never"," ","hardcodes a color itself. Change a token once here and both ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Link"]}," and the"," ","sitewide fallback (below) pick it up."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["neutral"]},"'s ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":hover"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":active"]}," are intentionally flattened to match its rest"," ","color — that's a deliberate design decision (a black link doesn't get a color"," ","change on hover), not an incomplete state. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":visited"]}," is not flattened for"," ","either group and follows the spec's sage values: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["neutral"]}," uses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$sage-11"]},"/"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$sage-dark-11"]}," (a muted gray, clearly distinct from rest), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["brand"]}," uses"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$sage-12"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["$sage-dark-12"]}," (legitimately near-black/near-white). Both are"," ","correct per spec, not bugs, and can only be seen with real browsing history —"," ","not in an incognito/sandboxed browser, and not on ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/link-demo"]},"'s links"," ","directly (see the reset button there, which points every demo link at a"," ","fresh, never-visited URL instead)."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"what-plain-a-tags-get-the-fallback","__idx":4},"children":["What plain ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[""]}," tags get (the fallback)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Most of the site's links aren't JSX — they're ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[text](url)"]}," or raw"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[""]}," inside ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".md"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".mdx"]}," files. Two mechanisms make sure those"," ","still get themed, without every markdown file needing to import a component:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MarkdownLink"]}," override"]}," — ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/components/MarkdownLink.tsx"]}," ","replaces Redocly's default renderer for markdoc's ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[text](url)"]}," syntax"," ","(registered in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/markdoc/components.tsx"]},")."," ","It still renders Redocly's own routing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Link"]}," (so client-side navigation"," ","keeps working) but stamps it with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Link"]},"'s class scheme via the exported"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["linkClassName()"]}," helper, forced to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["intention=\"neutral\" variation=\"inline\""]}," ","— docs/technical body copy stays black, not brand green, per design"," ","direction. This covers the overwhelming majority of markdown links"," ","site-wide with no per-file changes."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["CSS-cascade fallback"]}," — ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"../../../styles/_content.scss"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/_content.scss"]}]},"'s"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["a:not(.xrpl-link)"]}," rule, scoped to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[data-component-name=\"Markdown/Markdown\"] article"]},","," ","applies the same neutral/on-theme mixins directly. This is the safety net"," ","for anything the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MarkdownLink"]}," override doesn't reach: raw HTML ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[""]}," ","embedded directly in a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".md"]}," file (markdoc passes those through as literal"," ","HTML, bypassing the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["link"]}," node entirely) and tag components that render"," ","their own ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[""]}," (e.g. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{% child-pages %}"]}," → ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ChildPages.tsx"]},")."]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Both paths call the exact same ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["_link-tokens.scss"]}," mixins ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Link"]}," itself uses,"," ","so there's one source of truth for color/underline/focus-ring values —"," ","nothing is hand-duplicated."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you're building raw HTML strings that can't use JSX at all (e.g. a data"," ","array rendered with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dangerouslySetInnerHTML"]},", like the FAQ answers in"," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/ja/about"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["about/index.page.tsx"]}]},"), you can opt a"," ","specific link into a non-neutral treatment by writing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["linkClassName()"]},"'s"," ","output literally into the string:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"...\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Anything without an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["xrpl-link"]}," class at all still falls through to the"," ","neutral fallback above — it never renders unstyled."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"adding-a-new-notxrpl-link-site","__idx":5},"children":["Adding a new ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":not(.xrpl-link)"]}," site"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A handful of older, page/component-scoped stylesheets style ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[""]}," tags"," ","directly (landing-page body copy, FAQ accordions, card descriptions, etc.),"," ","predating this component. Each one needs a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":not(.xrpl-link)"]}," exclusion so it"," ","doesn't fight the component's own color rules on specificity — otherwise a"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Link"]}," rendered inside that context can get silently overridden (this has"," ","happened several times: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["_landings.scss"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["_light-theme.scss"]},"'s separate"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".landing"]}," block, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["_pages.scss"]},"'s FAQ rule, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CardTextIconCard.scss"]},"'s"," ","description-link rule). If you add a new CSS rule that targets ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["a"]}," by tag"," ","inside some content area, exclude ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".xrpl-link"]}," from it, the same way the"," ","existing ones do."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"specificity-gotcha-where-and-bds-theme-mode","__idx":6},"children":["Specificity gotcha: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":where()"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-theme-mode"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["_link-tokens.scss"]},"'s mixins wrap ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["both"]}," light and dark branches in an"," ","explicit ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-theme-mode(light)"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-theme-mode(dark)"]}," call — neither is"," ","left as an unscoped default. This isn't stylistic: an unscoped"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".xrpl-link--brand { color: ... }"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["(0,1,0)"]}," specificity, and it loses to"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["_light-theme.scss"]},"'s generic ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html.light a:where(:not(.bds-link)...)"]}," ","fallback, which resolves to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["(0,1,2)"]}," — ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":where()"]}," zeroes the specificity of"," ","selectors ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["inside"]}," it, but not ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["html"]},"/",{"$$mdtype":"Tag","name":"code","attributes":{},"children":[".light"]}," sitting outside it. Wrapping"," ","both branches the same way brings every ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Link"]}," color rule to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["(0,2,1)"]},","," ","which wins cleanly without ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["!important"]},". Keep this pattern if you touch these"," ","mixins."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"files","__idx":7},"children":["Files"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Link.tsx"]}," — component, types, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["linkClassName()"]}," helper"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["_link.scss"]}," — geometry, typography, display, triggers the icon's built-in motion (see below)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["../Icons"]}," — ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["XrplArrowInternalLinkIcon"]}," / ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["XrplArrowExternalLinkIcon"]},", the trailing arrow itself: artwork, sizing (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["1em"]},", tracks this element's own font-size), and the hover/focus-visible motion, none of which lives in this component. See ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shared/components/Icons/shared.scss"]}," for the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bds-icon-engaged"]}," contract and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/icon-demo"]}," for a live reference."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["../../../styles/_link-tokens.scss"]}," — color/underline/focus mixins (shared with the fallback)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["../../../@theme/components/MarkdownLink.tsx"]}," — markdown ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["[text](url)"]}," override"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["../../../styles/_content.scss"]}," — raw-HTML-in-markdown fallback"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["../../../link-demo.page.tsx"]}," — visual reference of every variant"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["legacy/BdsLink.tsx"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["legacy/LinkArrow.tsx"]}," — old component, unused, kept for reference"]}]}]},"headings":[{"value":"Link","id":"link","depth":1},{"value":"Usage","id":"usage","depth":2},{"value":"Props","id":"props","depth":2},{"value":"Color groups → intention × context","id":"color-groups--intention--context","depth":2},{"value":"What plain tags get (the fallback)","id":"what-plain-a-tags-get-the-fallback","depth":2},{"value":"Adding a new :not(.xrpl-link) site","id":"adding-a-new-notxrpl-link-site","depth":2},{"value":"Specificity gotcha: :where() and bds-theme-mode","id":"specificity-gotcha-where-and-bds-theme-mode","depth":2},{"value":"Files","id":"files","depth":2}],"frontmatter":{"seo":{"title":"Link"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/shared/components/Link/Link.md"},"lastModified":"2026-08-28T16:32:06.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/ja/shared/components/link/link-1","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}