feat: migrate to the realm rc version

@theme/components/Navbar/Navbar.tsx

@@ -1,12 +1,11 @@
 import * as React from "react";
 import styled from "styled-components";
-import { useThemeConfig } from "@theme/hooks/useThemeConfig";
+import { useThemeConfig, useThemeHooks } from "@redocly/theme/core/hooks";
-import { LanguagePicker } from "@theme/i18n/LanguagePicker";
+import { LanguagePicker } from "@redocly/theme/components/LanguagePicker/LanguagePicker";
-import { useI18n, useTranslate } from "@portal/hooks";
 import { slugify } from "../../helpers";
-import { Link } from "@portal/Link";
+import { Link } from "@redocly/theme/components/Link/Link";
-import { ColorModeSwitcher } from "@theme/components/ColorModeSwitcher/ColorModeSwitcher";
+import { ColorModeSwitcher } from "@redocly/theme/components/ColorModeSwitcher/ColorModeSwitcher";
-import { Search } from "@theme/components/Search/Search";
+import { Search } from "@redocly/theme/components/Search/Search";
 
 // @ts-ignore
 
@@ -20,6 +19,7 @@ const alertBanner = {
 export function Navbar(props) {
   // const [isOpen, setIsOpen] = useMobileMenu(false);
   const themeConfig = useThemeConfig();
+  const { useI18n } = useThemeHooks();
   const { changeLanguage } = useI18n();
   const menu = themeConfig.navbar?.items;
   const logo = themeConfig.logo;
@@ -104,10 +104,10 @@ export function Navbar(props) {
               <Search className="topnav-search" />
             </div>
             <div id="topnav-language" className="nav-item">
-              <LanguagePicker onChangeLanguage={changeLanguage} onlyIcon />
+              <LanguagePicker onChangeLanguage={changeLanguage} onlyIcon alignment="end" />
             </div>
             <div id="topnav-theme" className="nav-item">
-              <StyledColorModeSwitcher />
+              <ColorModeSwitcher />
             </div>
           </NavItems>
         </TopNavCollapsible>
@@ -116,10 +116,6 @@ export function Navbar(props) {
   );
 }
 
-const StyledColorModeSwitcher = styled(ColorModeSwitcher)`
-  padding: 10px;
-`;
-
 export function AlertBanner(props) {
   const { message, button, link } = props;
   return (
@@ -151,6 +147,7 @@ export function TopNavCollapsible(props) {
 
 export function NavDropdown(props) {
   const { label, items, pathPrefix, labelTranslationKey } = props;
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   const dropdownGroups = items.map((item, index) => {
@@ -283,6 +280,7 @@ export function MobileMenuIcon() {
 }
 
 export function GetStartedButton() {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return (

@theme/components/XRPLCard.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import dynamicReact from '@markdoc/markdoc/dist/react';
-import { Link } from '@portal/Link';
+import { Link } from '@redocly/theme/components/Link/Link';
 
 export interface XRPLCardProps {
     title: string,

@theme/markdoc/components.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { useLocation } from 'react-router-dom';
 // @ts-ignore
 import dynamicReact from '@markdoc/markdoc/dist/react';
-import { usePageSharedData, useTranslate } from '@portal/hooks';
+import { Link } from '@redocly/theme/components/Link/Link';
-import { Link } from '@portal/Link';
+import { useThemeHooks } from '@redocly/theme/core/hooks'
 import { idify } from '../helpers';
 
 export {default as XRPLoader} from '../components/XRPLoader';
@@ -11,6 +11,7 @@ export { XRPLCard, CardGrid } from '../components/XRPLCard';
 
 
 export function IndexPageItems() {
+    const { usePageSharedData } = useThemeHooks();
     const data = usePageSharedData('index-page-items') as any[];
     return (
         <div className="children-display">
@@ -148,6 +149,7 @@ function shieldsIoEscape(s: string) {
 }
 
 export function NotEnabled() {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   return (
     <span className="status not_enabled" title={translate("This feature is not currently enabled on the production XRP Ledger.")}><i className="fa fa-flask"></i></span>

@theme/styles.css

@@ -163,29 +163,26 @@ ul.nav.navbar-nav {
   --color-primary-text: #161087;
   --color-primary-text-active: #0d086e;*/
   
-  --link-text-color: #fff;
+  --link-color-primary: #fff;
   --link-decoration: underline;
   --link-font-weight: var(--font-weight-regular);
 
-  --link-hover-text-color: #9a52ff;
+  --link-color-primary-hover: #9a52ff;
-  --link-hover-decoration: underline;
+  --link-decoration-hover: underline;
 
-  --link-active-decoration: underline;
+  --link-color-visited: #fff;
-  --link-active-text-color: var(--color-blue-7);
-
-  --link-visited-text-color: #fff;
   --link-visited-decoration: underline;
 
-  --bg-base: var(--color-gray-10);
+  --bg-color: var(--color-gray-10);
-  --bg-raised: var(--color-gray-8);
+  --bg-color-raised: var(--color-gray-8);
-  --background-color: var(--bg-base);
+  --background-color: var(--bg-color);
 
   --font-family-base: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   --heading-font-family: var(--font-family-base);
 
   --inline-code-font-family: "Space Mono", monospace;
   --inline-code-text-color: #5beb9d; /* $green-400 */
-  --inline-code-background-color: #0a2e1b; /* $green-1000 */
+  --inline-code-bg-color: #0a2e1b; /* $green-1000 */
   --inline-code-border-radius: 0;
 
   --heading-anchor-color: #9a52ff;
@@ -197,65 +194,64 @@ ul.nav.navbar-nav {
   --h5-font-size: 1.25rem;
 
   --sidebar-border-color: transparent;
-  --sidebar-background-color: transparent;
+  --sidebar-bg-color: transparent;
-
+  --sidebar-margin-horizontal: 32px;
-  --search-item-active-text-color: #E8E9E7;
 
   --border-radius-md: 4px;
 
-  --code-block-background-color: #232325;
+  --code-block-bg-color: #232325;
-  --code-block-controls-background-color: #232325;
+  --code-block-controls-bg-color: #232325;
   --code-block-controls-border: none;
-  --code-block-border-color: #232325;
   --code-block-padding: 0 2rem 1.5rem 2rem;
-  --code-block-border-radius: 4px;
 
   --breadcrumbs-margin-bottom: 0.5rem;
   --breadcrumbs-text-color: var(--color-gray-4);
   --breadcrumbs-gap: 0 8px;
   --breadcrumbs-font-size: 0.833em;
 
-  --language-picker-min-height: 38px;
+  --footer-bg-color: transparent;
-
+  --footer-column-divider-color: transparent;
-  --footer-background-color: transparent;
-  --footer-dividing-border-color: transparent;
   --footer-border-color: transparent;
   --footer-title-font-weight: 600;
   --footer-title-font-size: 1rem;
   --footer-title-text-color: #A2A2A4;
 
-  --sidebar-margin-horizontal: 32px;
+  --menu-item-padding-horizontal: 0px;
-  --sidebar-item-padding-horizontal: 0;
 }
 
 :root.light {
-  --link-hover-text-color: #4A00B2;
+  --link-color-primary-hover: #4A00B2;
-  --link-visited-text-color: #000;
+  --link-color-visited: #000;
-  --text-secondary: #000;
+  --text-color-secondary: #000;
-  --code-block-background-color: #E0E0E1;
+  --code-block-bg-color: #E0E0E1;
-  --code-block-controls-background-color: #E0E0E1;
+  --code-block-controls-bg-color: #E0E0E1;
   --code-block-controls-border: none;
-  --code-block-border-color: #E0E0E1;
+  --md-tabs-active-tab-bg-color: #C1C1C2;
-  --md-tabs-active-tab-background-color: #C1C1C2;
   
   --code-block-tokens-function-color: #B23C00;
   --code-block-tokens-operator-color: #000;
   --code-block-tokens-comment-color: #343437;
   --code-block-tokens-string-color: #145C35;
-  --inline-code-background-color: #E0E0E1;
+  --inline-code-bg-color: #E0E0E1;
+
+  --search-trigger-bg-color: #E0E0E1;
+  --search-trigger-color: #838386;
 
-  --search-trigger-background-color: #E0E0E1;
-  --search-trigger-text-color: #838386;
   --language-picker-border-color: #C1C1C2;
   --language-picker-background-color: #E0E0E1;
-  --select-list-background-color: #E0E0E1;
+  --select-list-bg-color: #E0E0E1;
 
   --footer-title-text-color: #000;
-  --bg-base: var(--color-gray-1);
+  --bg-color: var(--color-gray-1);
-  --bg-raised: var(--color-gray-2);
+  --bg-color-raised: var(--color-gray-2);
-  --button-background-color: var(--color-gray-2);
+  --button-content-color-link: #000;
 }
 
 :root .form-control-plaintext {
   color: var(--text-color);
 }
+
+[data-component-name="Search/SearchTrigger"] > div {
+  justify-content: start;
+  width: 100%;
+}

about/history.page.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export const frontmatter = {
   seo: {
@@ -9,6 +9,7 @@ export const frontmatter = {
 };
 
 export default function History() {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const [openSections, setOpenSections] = React.useState({});
 

about/impact.page.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import mapDark from "../static/js/impact/mapDark.json";
 import mapLight from "../static/js/impact/mapLight.json";
 import { useLottie } from "lottie-react";
@@ -16,6 +16,7 @@ export const frontmatter = {
 export default function Impact() {
   const theme = useThemeFromClassList(["dark", "light"]);
   const [videoVisible, setVideoVisible] = useState(false); // State to control visibility
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const handleVideoClick = () => {
     setVideoVisible(true); // Show the iframe

about/index.page.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export const frontmatter = {
   seo: {
@@ -27,6 +27,7 @@ const faqs = [
 ];
 
 export default function XrplOverview() {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const [videoOne, setVideoOne] = React.useState(false);
   const [currentVideoUrl, setCurrentVideoUrl] = React.useState("");

about/uses.page.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import numLight from "../static/js/ecosystem/numbers-animation-light.json";
 import numDark from "../static/js/ecosystem/numbers-animation.json";
 import arrow from "../static/js/ecosystem/arrow-animation.json";
@@ -473,6 +473,7 @@ const uses = [
 
 export default function Uses() {
   const theme = useThemeFromClassList(["dark", "light"]);
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const [displayModal, setDisplayModal] = React.useState(false);
   const [currentIndex, setCurrentIndex] = React.useState(0);

about/xrp.page.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import briefcaseIcon from "../static/img/icons/briefcase.svg";
 import userIcon from "../static/img/icons/user.svg";
 export const frontmatter = {
@@ -72,6 +72,7 @@ const exchanges = [
 ];
 
 export default function XrpOverview() {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const [activeSection, setActiveSection] = React.useState(null);
 

blog/index.page.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
-import { useTranslate, usePageSharedData } from "@portal/hooks";
+import { useThemeHooks } from "@redocly/theme/core/hooks";
 import moment from "moment";
 
 export const frontmatter = {
@@ -24,6 +24,7 @@ const categories = {
 };
 
 export default function Index() {
+  const { useTranslate, usePageSharedData } = useThemeHooks();
   const { translate } = useTranslate();
   const { blogPosts } = usePageSharedData<any>("blog-posts");
 

community/ambassadors.page.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export const frontmatter = {
   seo: {
@@ -13,6 +13,7 @@ false
 const target= {prefix: ''}; // TODO: fixme
 
 export default function Ambassadors() {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return (

community/developer-funding.page.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export const frontmatter = {
   seo: {
@@ -13,6 +13,7 @@ false;
 const target = { prefix: "" }; // TODO: fixme
 
 export default function Funding() {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return (

community/events.page.tsx

@@ -1,6 +1,6 @@
 import { useState, useMemo } from "react";
 import * as React from "react";
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 const moment = require("moment");
 const amaImage = require("../static/img/events/AMAs.png")
 const hackathon = require("../static/img/events/Hackathons.png")
@@ -686,6 +686,7 @@ const events = [
 ];
 
 export default function Events() {
+  const { useTranslate} = useThemeHooks();
   const { translate } = useTranslate();
   const { past, upcoming } = useMemo(() => categorizeDates(events), []);
 

community/index.page.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import moment from "moment";
 
 export const frontmatter = {
@@ -167,6 +167,7 @@ const events = [
 ];
 const { nearestDateDiff, nearestEvent } = findNearestUpcomingEvent(events);
 const XrplEventsAndCarouselSection = ({ events }) => {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const [currentIndex, setCurrentIndex] = useState(7);
 
@@ -302,6 +303,7 @@ const XrplEventsAndCarouselSection = ({ events }) => {
 };
 
 const CommunityPage: React.FC = () => {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   return (
     <div className="no-sidebar landing page-community">

docs/index.page.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export const frontmatter = {
   seo: {
@@ -208,6 +208,7 @@ function VideoCard(props: { url: string; title: string; src: string }) {
 }
 
 function DevToolCard(props: { link: string; title: string; description: string }) {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const { link, title, description } = props;
   return (
@@ -228,6 +229,7 @@ function PrimaryButton(props: { href: string; text: string; isArrowUp: boolean }
 }
 
 export default function Docs() {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return (

index.page.tsx

@@ -1,4 +1,4 @@
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export const frontmatter = {
   seo: {
@@ -103,6 +103,7 @@ const features = [
 ];
 
 export default function Index() {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return (

package.json

@@ -15,7 +15,7 @@
     "@codemirror/state": "6.3.3",
     "@codemirror/view": "^6.22.2",
     "@lezer/highlight": "^1.2.0",
-    "@redocly/realm": "^0.82.4",
+    "@redocly/realm": "0.83.0-rc.1",
     "@uiw/codemirror-themes": "4.21.21",
     "@uiw/react-codemirror": "^4.21.21",
     "@xrplf/isomorphic": "^1.0.0-beta.1",

resources/code-samples.page.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { usePageSharedData, useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export const frontmatter = {
   seo: {
@@ -24,6 +24,7 @@ const target = {
 };
 
 export default function CodeSamples() {
+  const { useTranslate, usePageSharedData } = useThemeHooks();
   const { translate } = useTranslate();
   const { codeSamples, langs } = usePageSharedData<any>('code-samples');
 

resources/dev-tools/components/AlertTemplate.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
   
 const alertStyle = {
   position: "relative",
@@ -30,6 +30,7 @@ interface AlertTemplateProps {
 }
   
 export default function AlertTemplate ({ message, options, style, close }: AlertTemplateProps): React.JSX.Element {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate()
   return(
     <div className={clsx("bootstrap-growl alert alert-dismissible", typeToClass(options.type))} style={{ ...alertStyle, ...style }}>

resources/dev-tools/components/DestinationAddressInput.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { clsx } from 'clsx'
 import { isValidAddress } from 'xrpl'
 
@@ -27,6 +27,7 @@ export function DestinationAddressInput(
         setDestinationAddress, 
     } : DestinationAddressInputProps
 ): React.JSX.Element {
+    const { useTranslate } = useThemeHooks();
     const { translate } = useTranslate()
     const [ isValidDestinationAddress, setIsValidDestinationAddress ] = useState(true)
     

resources/dev-tools/components/InitButton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { clsx } from 'clsx'
 
 import { Client, type Wallet, type TxResponse, dropsToXrp } from 'xrpl'
@@ -176,6 +176,7 @@ export function InitButton({
     isInitEnabled: boolean,
     toInit: InitializationProps
 }): React.JSX.Element {
+    const { useTranslate } = useThemeHooks();
     const { translate } = useTranslate()
 
     return (<div className="form-group">

resources/dev-tools/components/Loader.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export const Loader = () => {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return <img className="throbber" src="/img/xrp-loader-96.png" alt={translate("(loading)")} />

resources/dev-tools/components/LogEntry.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { clsx } from 'clsx'
 
 export const CLASS_GOOD = "badge badge-success"
@@ -60,6 +60,7 @@ export function LogEntry({
     status
 }: LogEntryItem)
 {
+    const { useTranslate } = useThemeHooks();
     const {translate} = useTranslate()
     let icon = undefined
     if(!!(status?.icon)) {

resources/dev-tools/components/Modal.tsx

@@ -1,5 +1,5 @@
 import React, { JSX, ReactElement, ReactNode } from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 interface ModalProps {
   id: string // used for targeting animations
@@ -48,6 +48,7 @@ export const Modal = ({title, footer, children, onClose, id}: ModalProps) => {
 }
 
 export const ModalCloseBtn = ({onClick}) => {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return <button
@@ -61,6 +62,7 @@ export const ModalCloseBtn = ({onClick}) => {
 }
 
 export const ModalClipboardBtn = ({textareaRef}) => {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return <button

resources/dev-tools/components/StatusSidebar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { clsx } from 'clsx'
 
 import { type Wallet } from 'xrpl'
@@ -16,6 +16,7 @@ export function StatusSidebar({
     connectionReady: boolean,
     txHistory: React.JSX.Element[],
 }) {
+    const { useTranslate } = useThemeHooks();
     const { translate } = useTranslate();
 
     return (<aside className="right-sidebar col-lg-6 order-lg-4">

resources/dev-tools/components/TextLookupForm.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react'
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LogEntry, LogEntryItem } from './LogEntry';
 
 /**
@@ -42,6 +42,7 @@ export interface TextLookupFormProps {
  * @returns A single-entry form which displays logs after submitting.
  */
 export function TextLookupForm(props: TextLookupFormProps) {
+    const { useTranslate } = useThemeHooks()
     const { translate } = useTranslate()
 
     const { title, description, buttonDescription, formPlaceholder, handleSubmit } = props

resources/dev-tools/components/TransactionButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react'
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { clsx } from 'clsx'
 
 import { type Transaction, type Wallet } from 'xrpl'
@@ -65,6 +65,7 @@ export function TransactionButton({
     checkBox,
     customOnClick
 }: TransactionButtonProps ) {
+    const { useTranslate } = useThemeHooks()
     const { translate } = useTranslate()
 
     const [waitingForTransaction, setWaitingForTransaction] = useState(false)

resources/dev-tools/components/rpc-tool/rpc-response-group.tsx

@@ -1,4 +1,4 @@
-import { useTranslate } from '@portal/hooks'
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ReactElement, useState } from 'react';
 import JsonView from 'react18-json-view'
 
@@ -26,6 +26,7 @@ export const RPCResponseGroup = ({ response, anchor, customExpanded, customExpan
 }
 
 const RPCResponseGroupExpanders = ({ customExpanded, customExpandedText, setExpanded }) => {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return <ul className="nav nav-pills">

resources/dev-tools/components/websocket-api/connection-modal.tsx

@@ -1,4 +1,4 @@
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Connection } from './types';
 import { ChangeEvent } from 'react';
 import { Modal } from '../Modal';
@@ -19,6 +19,7 @@ export const ConnectionModal: React.FC<ConnectionProps> = ({
                                                              closeConnectionModal,
                                                              connections,
                                                            }) => {
+  const { useTranslate } = useThemeHooks();                                                  
   const { translate } = useTranslate();
   const handleConnectionChange = (event: ChangeEvent<HTMLInputElement>) => {
     const selectedValue = event.target.value;

resources/dev-tools/components/websocket-api/curl-modal.tsx

@@ -1,4 +1,4 @@
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Connection } from './types';
 import { useRef, useState } from 'react';
 import { Modal, ModalClipboardBtn, ModalCloseBtn } from '../Modal';
@@ -37,6 +37,7 @@ export const CurlModal: React.FC<CurlProps> = ({
                                                  selectedConnection,
                                                }) => {
   const curlRef = useRef(null);
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const footer = <>
     <ModalClipboardBtn textareaRef={curlRef} />

resources/dev-tools/components/websocket-api/permalink-modal.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Connection } from './types';
 import { Modal, ModalClipboardBtn, ModalCloseBtn } from '../Modal';
 
@@ -17,6 +17,7 @@ const PermalinkModal: React.FC<PermaLinkProps> = ({
                                                     currentBody,
                                                     selectedConnection
 }) => {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const permalinkRef = useRef(null);
 

resources/dev-tools/components/websocket-api/right-sidebar.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { Link } from "@portal/Link";
+import { Link } from "@redocly/theme/components/Link/Link";
 import { slugify } from "./slugify";
 import { CommandGroup, CommandMethod } from './types';
 
@@ -15,6 +15,7 @@ export const RightSideBar: React.FC<RightSideBarProps> = ({
                                                             currentMethod,
                                                             setCurrentMethod,
                                                           }) => {
+  const { useTranslate } = useThemeHooks();                                                          
   const { translate } = useTranslate();
   return (
     <div className="command-list-wrapper">

resources/dev-tools/domain-verifier.page.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { decode } from "ripple-binary-codec";
 import addressCodec, { encodeNodePublic } from "ripple-address-codec";
 import { verify as keyCodecVerify } from "ripple-keypairs";
@@ -19,6 +19,7 @@ const TIPS =
   <p>Check if the xrp-ledger.toml file is actually hosted in the /.well-known/ location at the domain in your manifest. Check your server\'s HTTPS settings and certificate, and make sure your server provides the required <a href="xrp-ledger-toml.html#cors-setup">CORS header.</a></p>;
 
 const DomainVerificationPage = () => {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const TOML_PATH = "/.well-known/xrp-ledger.toml";
   let query_param = 0;

resources/dev-tools/index.page.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export const frontmatter = {
   seo: {
@@ -119,6 +119,7 @@ const other = [
 ];
 
 export default function DevTools() {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return (

resources/dev-tools/rpc-tool.page.tsx

@@ -1,5 +1,5 @@
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { Link } from '@portal/Link';
+import { Link } from '@redocly/theme/components/Link/Link';
 import { useState, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import JsonView from 'react18-json-view'
@@ -25,6 +25,7 @@ export default function RpcTool() {
   const [ledgerResponse, setLedgerResponse] = useState(null);
   const [inputText, setInputText] = useState(slug ? slug.slice(1) : "");
   const [errorText, setErrorText] = useState(null);
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const [inputType, setInputType] = useState("");
   const [showResult, setShowResult] = useState(false);

resources/dev-tools/toml-checker/ValidateTomlSteps.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import axios, { AxiosError } from "axios";
 import { parse } from "smol-toml";
 import { getListEntries } from "./ListTomlFields";
@@ -25,7 +25,8 @@ async function validateAndDisplayFields(
     domainToVerify?: string,
     filterDisplayedFieldsTo?: Function): Promise<boolean> {
 
-    const { translate } = useTranslate()
+    const { useTranslate } = useThemeHooks();
+    const { translate } = useTranslate();
 
     // If there's no data, do nothing
     if(!fields) {

resources/dev-tools/tx-sender.page.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react'
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 import AlertTemplate from './components/AlertTemplate';
 import { transitions, positions, Provider as AlertProvider } from 'react-alert'
@@ -104,6 +104,7 @@ async function onClickCreateEscrow(
 }
 
 function TxSenderBody(): React.JSX.Element {
+    const { useTranslate } = useThemeHooks();
     const { translate } = useTranslate();
 
     const [client, setClient] = useState<Client | undefined>(undefined)

resources/dev-tools/websocket-api-tool.page.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useRef } from 'react';
 import { useLocation } from "react-router-dom";
-import { useTranslate } from "@portal/hooks";
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import {
   JsonParam,
   StringParam,
@@ -38,6 +38,7 @@ export function WebsocketApiTool() {
   })
 
   const { hash: slug } = useLocation();
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const [isConnectionModalVisible, setIsConnectionModalVisible] =
     useState(false);

resources/dev-tools/xrp-faucets.page.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { useState } from 'react';
 import { Client, dropsToXrp, Wallet } from 'xrpl'; 
 import * as faucetData from './faucets.json'
@@ -43,6 +43,7 @@ async function waitForSequence(client: Client, address: string):
 }
 
 function FaucetEndpoints({ faucet, givenKey } : { faucet: FaucetInfo, givenKey: string}) {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return (<div key={givenKey}>
@@ -68,6 +69,7 @@ function FaucetSidebar({ faucets }: { faucets: FaucetInfo[] }): React.JSX.Elemen
 }
 
 export default function XRPFaucets(): React.JSX.Element {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   const faucets: FaucetInfo[] = faucetData.knownFaucets
@@ -124,6 +126,7 @@ async function generateFaucetCredentialsAndUpdateUI(
   setSecret("")
   setBalance("")
   setSequence("")
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
 
@@ -150,6 +153,7 @@ async function generateFaucetCredentialsAndUpdateUI(
 }
 
 function TestCredentials({selectedFaucet}) {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   const [generatedCredentialsFaucet, setGeneratedCredentialsFaucet] = useState("")

resources/dev-tools/xrp-ledger-toml-checker.page.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { TextLookupForm, type TextLookupFormProps } from './components/TextLookupForm';
 import { fetchFile, fetchWallet } from './toml-checker/ValidateTomlSteps';
 import { LogEntryItem } from './components/LogEntry';
@@ -45,6 +45,7 @@ function handleSubmitDomain(
 }
 
 export default function TomlChecker() {
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   const domainButtonProps: TextLookupFormProps = {

static/js/xrpl-guard.tsx

@@ -1,4 +1,4 @@
-import { useTranslate } from '@portal/hooks';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { isFunction } from './type-helpers'
 import { FC } from 'react'
 import { useEffect, useState } from 'react'
@@ -63,7 +63,7 @@ export const XRPLGuard: FC<{ testCheck?: () => boolean, children }> = ({
   testCheck,
   children,
 }) => {
-
+  const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const isXRPLLoaded = useThrottledCheck(
       testCheck ?? (() => typeof xrpl === 'object'),

styles/_xrplai.scss

@@ -3,6 +3,8 @@ button.MarkpromptFloatingTrigger {
   border-radius: $border-radius-sm;
   right: 16px;
   border: 1px solid transparent;
+  color: var(--markprompt-primaryForeground);
+  background-color: var(--markprompt-primary);
 
   @include media-breakpoint-up(lg) {
     right: 32px;

translations.yaml

@@ -1,2 +0,0 @@
-theme.page.previousButton: "Previous: {{label}}"
-theme.page.nextButton: "Next: {{label}}"

tsconfig.json

@@ -4,14 +4,7 @@
     "baseUrl": ".",
     "jsx": "react-jsx",
     "resolveJsonModule": true,
-    "paths": {
+    "module": "es2015",
-      "@theme/*": [
+    "moduleResolution": "bundler"
-        "./@theme/*",
-        "./node_modules/@redocly/theme/src/*"
-      ],
-      "@portal/*": [
-        "./node_modules/@redocly/realm/dist/client/app/*"
-      ]
-    },
   }
 }