@redocly/theme 0.25.1 → 0.25.3

package/src/components/Feedback/Reasons.tsx

@@ -9,11 +9,6 @@ export const Reasons = ({ settings, onSubmit, className }: ReasonsProps): JSX.El
   const { label, multi, buttonText, items = [] } = settings;
   const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
   const { translate } = useTranslate();
-  const translationKeys = {
-    label: 'theme.feedback.settings.reasons.label',
-    items: 'theme.feedback.settings.reasons.items',
-    send: 'theme.feedback.settings.reasons.send',
-  };
 
   if (!items.length) {
     return <></>;
@@ -36,12 +31,12 @@ export const Reasons = ({ settings, onSubmit, className }: ReasonsProps): JSX.El
   return (
     <Wrapper
       data-component-name="Feedback/Reasons"
-      data-translation-key={translationKeys.label}
+      data-translation-key="theme.feedback.settings.reasons.label"
       className={className}
     >
       <Label>
         {translate(
-          translationKeys.label,
+          'theme.feedback.settings.reasons.label',
           label || 'Which statement describes your thoughts about this page?',
         )}
       </Label>
@@ -55,16 +50,16 @@ export const Reasons = ({ settings, onSubmit, className }: ReasonsProps): JSX.El
             onChange={() => handleOptionChange(idx)}
           />
           <label
-            data-translation-key={`${translationKeys.items}.${idx + 1}`}
+            data-translation-key={`theme.feedback.settings.reasons.items.${idx + 1}`}
             id={reason}
             onClick={() => handleOptionChange(idx)}
           >
-            {translate(`${translationKeys.items}.${idx + 1}`, reason)}
+            {translate(`theme.feedback.settings.reasons.items.${idx + 1}`, reason)}
           </label>
         </OptionWrapper>
       ))}
-      <SendButton data-translation-key={translationKeys.send} onClick={submitForm}>
-        {translate(translationKeys.send, buttonText || 'Send')}
+      <SendButton data-translation-key="theme.feedback.settings.reasons.send" onClick={submitForm}>
+        {translate('theme.feedback.settings.reasons.send', buttonText || 'Send')}
       </SendButton>
     </Wrapper>
   );

package/src/components/Feedback/Sentiment.tsx

@@ -13,12 +13,6 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
   const { translate } = useTranslate();
-  const translationKeys = {
-    submitText: 'theme.feedback.settings.submitText',
-    label: 'theme.feedback.settings.label',
-    likeLabel: 'theme.feedback.settings.comment.likeLabel',
-    dislikeLabel: 'theme.feedback.settings.comment.dislikeLabel',
-  };
 
   if (score && reasonsSettings?.enable && !reasons.length) {
     const { label: reasonsLabel, items, multi } = reasonsSettings;
@@ -35,11 +29,11 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
     const commentLabel =
       score === 1
         ? translate(
-            translationKeys.likeLabel,
+            'theme.feedback.settings.comment.likeLabel',
             commentSettings.likeLabel || 'What was most helpful?',
           )
         : translate(
-            translationKeys.dislikeLabel,
+            'theme.feedback.settings.comment.dislikeLabel',
             commentSettings.dislikeLabel || 'What can we improve?',
           );
     return (
@@ -58,9 +52,9 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
     }
     return (
       <Wrapper>
-        <Label data-translation-key={translationKeys.submitText}>
+        <Label data-translation-key="theme.feedback.settings.submitText">
           {translate(
-            translationKeys.submitText,
+            'theme.feedback.settings.submitText',
             submitText || 'Thank you for helping improve our documentation!',
           )}
         </Label>
@@ -70,8 +64,8 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
 
   return (
     <Wrapper data-component-name="Feedback/Sentiment" className={className}>
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, label || 'Was this page helpful?')}
+      <Label data-translation-key="theme.feedback.settings.label">
+        {translate('theme.feedback.settings.label', label || 'Was this page helpful?')}
       </Label>
       <Vote
         onClick={() => {

package/src/components/Feedback/Thumbs.tsx

@@ -5,10 +5,6 @@ import { useTranslate } from '@portal/hooks';
 
 export const ThumbUp = ({ text }: { text?: string }) => {
   const { translate } = useTranslate();
-  const translationKeys = {
-    thumbUp: 'theme.feedback.sentiment.thumbUp',
-  };
-
   return (
     <Wrapper style={{ alignItems: 'normal' }}>
       <Icon>
@@ -50,16 +46,13 @@ export const ThumbUp = ({ text }: { text?: string }) => {
           </g>
         </svg>
       </Icon>
-      <span>{translate(translationKeys.thumbUp, text || 'Yes')}</span>
+      <span>{translate('theme.feedback.sentiment.thumbUp', text || 'Yes')}</span>
     </Wrapper>
   );
 };
 
 export const ThumbDown = ({ text }: { text?: string }) => {
   const { translate } = useTranslate();
-  const translationKeys = {
-    thumbDown: 'theme.feedback.sentiment.thumbDown',
-  };
   return (
     <Wrapper style={{ alignItems: 'end' }}>
       <Icon>
@@ -100,7 +93,7 @@ export const ThumbDown = ({ text }: { text?: string }) => {
           </g>
         </svg>
       </Icon>
-      <span>{translate(translationKeys.thumbDown, text || 'No')}</span>
+      <span>{translate('theme.feedback.sentiment.thumbDown', text || 'No')}</span>
     </Wrapper>
   );
 };

package/src/components/Feedback/useReportDialog.ts

@@ -22,11 +22,6 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
   const isReportButtonShown = report?.hide === false; // TODO: report temporary disabled by default
   const { translate } = useTranslate();
   const { submitFeedback } = useSubmitFeedback();
-  const translationKeys = {
-    buttonText: 'theme.codeSnippet.report.buttonText',
-    tooltipText: 'theme.codeSnippet.report.tooltipText',
-    label: 'theme.codeSnippet.report.label',
-  };
 
   const showReportDialog = () => {
     setIsReportDialogShown(true);
@@ -36,13 +31,13 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
   };
   const reportButtonProps: ReportButtonProps = {
     onClick: showReportDialog,
-    buttonText: translate(translationKeys.buttonText, 'Report'),
-    tooltip: translate(translationKeys.tooltipText, 'Report a problem'),
+    buttonText: translate('theme.codeSnippet.report.buttonText', 'Report'),
+    tooltip: translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
     visible: isReportButtonShown,
   };
   const reportDialogProps: Partial<ReportDialogProps> = {
     settings: {
-      label: translate(translationKeys.label, 'What is wrong with this code?'),
+      label: translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
     },
     onSubmit: hideReportDialog,
     onCancel: hideReportDialog,

package/src/components/Filter/Filter.tsx

@@ -16,10 +16,6 @@ export function Filter({
   filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }) {
   const { translate } = useTranslate();
-  const translationKeys = {
-    selectAll: 'theme.catalog.filters.select.all',
-    clear: 'theme.catalog.filters.clear',
-  };
 
   if (!filter.parentUsed) return null;
 
@@ -34,7 +30,9 @@ export function Filter({
         value: '',
         element: (
           <FilterOption key="all" onClick={() => filter.selectOption('')}>
-            <FilterOptionLabel>{translate(translationKeys.selectAll, 'All')}</FilterOptionLabel>
+            <FilterOptionLabel>
+              {translate('theme.catalog.filters.select.all', 'All')}
+            </FilterOptionLabel>
             <FilterOptionCount>{defaultOptionCount}</FilterOptionCount>
           </FilterOption>
         ),

package/src/components/Filter/FilterContent.tsx

@@ -26,10 +26,6 @@ export function FilterContent({
   filterValuesCasing,
 }: FilterContentProps) {
   const { translate } = useTranslate();
-  const translationKeys = {
-    placeholder: 'theme.catalog.filters.placeholder',
-    clearAll: 'theme.catalog.filters.clearAll',
-  };
 
   const hasActiveFilters = filters.some((filter) => {
     if (filterTerm) return true;
@@ -49,7 +45,7 @@ export function FilterContent({
     <FilterContentWrapper isMobile={isMobile}>
       <FilterControls>
         <StyledInput
-          placeholder={translate(translationKeys.placeholder, 'Type to filter...')}
+          placeholder={translate('theme.catalog.filters.placeholder', 'Type to filter...')}
           value={filterTerm}
           onChange={(e) => setFilterTerm(e.target.value)}
         />
@@ -66,7 +62,7 @@ export function FilterContent({
       {hasActiveFilters && (
         <ActionsContainer>
           <ClearAllButton size="default" variant="outlined" onClick={handleClearAll}>
-            {translate(translationKeys.placeholder, 'Clear all filters')}
+            {translate('theme.catalog.filters.clearAll', 'Clear all filters')}
           </ClearAllButton>
         </ActionsContainer>
       )}

package/src/components/Filter/FilterPopover.tsx

@@ -34,10 +34,6 @@ export function FilterPopover({
     })
     .filter(Boolean) as ResolvedFilter[];
 
-  const translationKeys = {
-    placeholder: 'theme.catalog.filters.placeholder',
-    done: 'theme.catalog.filters.done',
-  };
   const { translate } = useTranslate();
 
   return (
@@ -45,7 +41,7 @@ export function FilterPopover({
       <FilterPopoverHeader>
         <FilterPopoverHeaderLabel>Add Filter</FilterPopoverHeaderLabel>
         <FilterPopoverHeaderButton onClick={() => setIsAddingFilter(false)}>
-          {translate(translationKeys.placeholder, 'Done')}
+          {translate('theme.catalog.filters.done', 'Done')}
         </FilterPopoverHeaderButton>
       </FilterPopoverHeader>
       <FilterContent
@@ -57,7 +53,7 @@ export function FilterPopover({
       />
       <FilterControls>
         <StyledInput
-          placeholder={translate(translationKeys.placeholder, 'Type to filter...')}
+          placeholder={translate('theme.catalog.filters.placeholder', 'Type to filter...')}
           value={filterTerm}
           onChange={(e) => setFilterTerm(e.target.value)}
         />

package/src/components/Footer/FooterCopyright.tsx

@@ -16,16 +16,13 @@ export function FooterCopyright({
   const { translate } = useTranslate();
   const { changeLanguage } = useI18n();
 
-  const translationKeys = {
-    copyrightText: 'theme.footer.copyrightText',
-  };
   return copyrightText ? (
     <Wrapper
       className={className}
       data-component-name="Footer/FooterCopyright"
-      data-translation-key={translationKeys.copyrightText}
+      data-translation-key="theme.footer.copyrightText"
     >
-      <Label>{translate(translationKeys.copyrightText, copyrightText)}</Label>
+      <Label>{translate('theme.footer.copyrightText', copyrightText)}</Label>
       <LanguagePicker onChangeLanguage={changeLanguage} placement="top" alignment="end" />
     </Wrapper>
   ) : null;

package/src/components/LastUpdated/LastUpdated.tsx

@@ -40,7 +40,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
 
   const text =
     format === 'timeago'
-      ? translate(translationKey, 'Last updated ')
+      ? translate(translationKey, 'Last updated') + ' '
       : translate(translationKey, 'Last updated on');
 
   return (

package/src/components/Markdown/styledVariables.ts

@@ -210,10 +210,64 @@ export const markdown = css`
   /**
   * @tokens Markdown Tabs
   */
+  
+  --md-tabs-container-text-color: inherit; // @presenter Color
+  --md-tabs-container-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-container-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-container-font-style: normal; // @presenter FontStyle
+  --md-tabs-container-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-container-background-color: inherit; // @presenter Color
+  --md-tabs-container-margin: 10px 0; // @presenter Spacing
+  --md-tabs-container-padding: 0; // @presenter Spacing
+  --md-tabs-container-border: none; // @presenter Border
+
+  --md-tabs-border: solid var(--border-primary); // @presenter Color
+  --md-tabs-border-width: 0 0 1px 0; // @presenter Spacing
+  --md-tabs-padding: 0; // @presenter Spacing
+
+  --md-tabs-content-text-color: inherit; // @presenter Color
+  --md-tabs-content-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-content-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-content-font-style: normal; // @presenter FontStyle
+  --md-tabs-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-content-background-color: inherit; // @presenter Color
+  --md-tabs-content-margin: 0; // @presenter Spacing
+  --md-tabs-content-padding: var(--spacing-base) 0; // @presenter Spacing
+  --md-tabs-content-border: none; // @presenter Border
 
   --md-tabs-tab-text-color: var(--text-secondary); // @presenter Color
+  --md-tabs-tab-font-size: var(--font-size-base); // @presenter FontSize
+  --md-tabs-tab-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-tab-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-tabs-tab-background-color: none; // @presenter Color
+  --md-tabs-tab-margin: 0 0 -1px 0; // @presenter Spacing
+  --md-tabs-tab-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --md-tabs-tab-border: none; // @presenter Color
+  --md-tabs-tab-border-width: 0; // @presenter Spacing
+  --md-tabs-tab-border-radius: 0; // @presenter BorderRadius
+
+  --md-tabs-active-tab-text-color: var(--text-primary); // @presenter Color
+  --md-tabs-active-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
+  --md-tabs-active-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
+  --md-tabs-active-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-active-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
+  --md-tabs-active-tab-background-color: var(--background-color); // @presenter Color
+  --md-tabs-active-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
   --md-tabs-active-tab-border-color: var(--border-primary); // @presenter Color
+  --md-tabs-active-tab-border-width: 0 0 1px 0; // @presenter Spacing
+  --md-tabs-active-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
+  
+  --md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
+  --md-tabs-hover-tab-font-size: var(--md-tabs-tab-font-size); // @presenter FontSize
+  --md-tabs-hover-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
+  --md-tabs-hover-tab-font-style: normal; // @presenter FontStyle
+  --md-tabs-hover-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
+  --md-tabs-hover-tab-background-color: var(--md-tabs-tab-background-color); // @presenter Color
+  --md-tabs-hover-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
   --md-tabs-hover-tab-border-color: var(--border-secondary); // @presenter Color
+  --md-tabs-hover-tab-border-width: 0 0 1px 0; // @presenter Spacing
+  --md-tabs-hover-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
 
   // @tokens End
 `;

package/src/components/Menu/hooks/use-mobile-menu-items.ts

@@ -13,10 +13,6 @@ const MENU_SEPARATOR: ResolvedNavItem = {
   separatorLine: true,
 };
 
-const TRANSLATION_KEYS = {
-  products: 'theme.mobileMenu.products',
-};
-
 export const useMobileMenuItems = (menuType: MenuType) => {
   const { versions = [] } = usePageVersions() || {};
   const { defaultLocale, currentLocale, locales } = useI18nConfig();
@@ -71,7 +67,7 @@ export const useMobileMenuItems = (menuType: MenuType) => {
     if (productMenuItems.length) {
       menuItems.push({
         type: 'separator',
-        label: translate(TRANSLATION_KEYS.products, 'Products'),
+        label: translate('theme.mobileMenu.products', 'Products'),
       });
 
       menuItems.push(...productMenuItems);

package/src/components/Menu/hooks/use-mobile-menu-levels.ts

@@ -7,11 +7,6 @@ import { MenuType } from '@theme/components/Menu/constants';
 import { useThemeConfig } from '@theme/hooks';
 import type { ResolvedNavItem } from '@theme/types/portal';
 
-const TRANSLATION_KEYS = {
-  mainMenu: 'theme.mobileMenu.mainMenu',
-  previous: 'theme.mobileMenu.previous',
-};
-
 export const useMobileMenuLevels = () => {
   const { versions = [] } = usePageVersions() || {};
   const activeVersion = versions.find((version) => version?.active);
@@ -29,7 +24,7 @@ export const useMobileMenuLevels = () => {
   const menuLevels = useMemo(() => {
     const menuLevels = [
       {
-        label: translate(TRANSLATION_KEYS.mainMenu, 'Main Menu'),
+        label: translate('theme.mobileMenu.mainMenu', 'Main Menu'),
         type: MenuType.MAIN_MENU,
       },
     ];
@@ -43,7 +38,7 @@ export const useMobileMenuLevels = () => {
 
     if (sidebarItems.length || activeVersion) {
       menuLevels.push({
-        label: translate(TRANSLATION_KEYS.previous, 'Previous'),
+        label: translate('theme.mobileMenu.previous', 'Previous'),
         type: MenuType.PAGE,
       });
     }

package/src/components/Menu/utils.ts

@@ -1,7 +1,8 @@
 import type { Location } from 'react-router-dom';
+import type { TFunction } from '@redocly/portal-types';
 
 import type { ItemState } from '@theme/components/Sidebar/types';
-import type { Locale, ResolvedNavItem, TFunction, Version } from '@theme/types/portal';
+import type { Locale, ResolvedNavItem, Version } from '@theme/types/portal';
 import { getPathnameForLocale } from '@portal/utils';
 import { withPathPrefix } from '@theme/utils/urls';
 

package/src/components/Profile/LoginLink.tsx

@@ -12,19 +12,16 @@ export interface LoginLinkProps {
 export function LoginLink({ href }: LoginLinkProps): JSX.Element {
   const { userProfile } = useThemeConfig();
   const { translate } = useTranslate();
-  const translationKeys = {
-    login: 'theme.profile.login',
-  };
 
   return (
     <StyledLink
       href={href}
-      data-translation-key={translationKeys.login}
+      data-translation-key="theme.profile.login"
       onClick={() => {
         telemetry.send('login_button_clicked', {});
       }}
     >
-      {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
+      {translate('theme.profile.login', userProfile?.loginLabel || 'Login')}
     </StyledLink>
   );
 }

package/src/components/Profile/MobileUserProfile.tsx

@@ -12,9 +12,6 @@ export function MobileUserProfile() {
   const { userProfile } = useThemeConfig();
   const { userData, handleLogout, loginUrl } = useProfileProps();
   const { translate } = useTranslate();
-  const translationKeys = {
-    login: 'theme.profile.login',
-  };
 
   if (!userData?.isAuthenticated && !loginUrl) return null;
 
@@ -26,7 +23,7 @@ export function MobileUserProfile() {
           data-cy="login-btn"
           onClick={() => telemetry.send('login_button_clicked', {})}
         >
-          {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
+          {translate('theme.profile.login', userProfile?.loginLabel || 'Login')}
         </LoginButton>
       ) : (
         <>

package/src/components/Profile/UserProfile.tsx

@@ -18,18 +18,15 @@ export function UserProfile({
 }: UserProfileProps): JSX.Element {
   const { userProfile } = useThemeConfig();
   const { translate } = useTranslate();
-  const translationKeys = {
-    myApps: 'theme.profile.myApps',
-    logout: 'theme.profile.logout',
-  };
+
   const [isOpened, setIsOpened] = useState<boolean>(false);
 
   const menuItems: JSX.Element[] = [<UserProfileData key={userData.name} userData={userData} />];
 
   if (hasDeveloperOnboarding) {
     menuItems.push(
-      <Link to="/apps" data-translation-key={translationKeys.myApps}>
-        {translate(translationKeys.myApps, 'My Apps')}
+      <Link to="/apps" data-translation-key="theme.profile.myApps">
+        {translate('theme.profile.myApps', 'My Apps')}
       </Link>,
     );
   }
@@ -55,11 +52,11 @@ export function UserProfile({
         handleLogout();
         telemetry.send('logout_menu_item_clicked', {});
       }}
-      data-translation-key={translationKeys.logout}
+      data-translation-key="theme.profile.logout"
       role="link"
     >
       <LogoutIcon />
-      {translate(translationKeys.logout, userProfile?.logoutLabel || 'Log out')}
+      {translate('theme.profile.logout', userProfile?.logoutLabel || 'Log out')}
     </Logout>,
   );
 

package/src/components/Search/CancelSearch.tsx

@@ -12,14 +12,11 @@ export function CancelSearch({
   className?: string;
 }): JSX.Element {
   const { translate } = useTranslate();
-  const translationKeys = {
-    cancel: 'theme.search.cancel',
-  };
 
   return (
     <Wrapper data-component-name="Search/CancelSearch" onClick={onClick} className={className}>
-      <Button data-translation-keys={translationKeys.cancel} fullWidth variant="outlined">
-        {translate(translationKeys.cancel, 'Cancel')}
+      <Button data-translation-keys="theme.search.cancel" fullWidth variant="outlined">
+        {translate('theme.search.cancel', 'Cancel')}
       </Button>
     </Wrapper>
   );

package/src/components/Search/RecentSearches.tsx

@@ -15,9 +15,6 @@ export function RecentSearches({
 }) {
   const { items, removeSearchHistoryItem } = useRecentSearches();
   const { translate } = useTranslate();
-  const translationKeys = {
-    title: 'theme.search.recent',
-  };
 
   if (!items || !items.length) return null;
 
@@ -34,8 +31,8 @@ export function RecentSearches({
 
   return (
     <Wrapper data-component-name="Search/RecentSearches" className={className}>
-      <Title data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, 'Recent searches')}
+      <Title data-translation-key="theme.search.recent">
+        {translate('theme.search.recent', 'Recent searches')}
       </Title>
       <RecentItems>
         {items.map((item) => (

package/src/components/Search/SearchDialog.tsx

@@ -39,13 +39,6 @@ export const SearchDialog = ({
     }
   };
 
-  const translationKeys = {
-    noResults: 'theme.search.noResults',
-    navigate: 'theme.search.keys.navigate',
-    select: 'theme.search.keys.select',
-    exit: 'theme.search.keys.exit',
-  };
-
   const mapItem = (item: SearchDocument) => {
     return (
       <SearchItem key={item.id} item={item} product={!product ? item.product?.name : undefined} />
@@ -74,8 +67,8 @@ export const SearchDialog = ({
             items.length ? (
               items.map(mapItem)
             ) : (
-              <Message data-translation-key={translationKeys.noResults}>
-                {translate(translationKeys.noResults, 'No results')}
+              <Message data-translation-key="theme.search.noResults">
+                {translate('theme.search.noResults', 'No results')}
               </Message>
             )
           ) : (
@@ -88,19 +81,19 @@ export const SearchDialog = ({
         <BottomContainer>
           <Shortcuts>
             <Shortcut
-              data-translation-key={translationKeys.navigate}
+              data-translation-key="theme.search.keys.navigate"
               combination="Tab"
-              text={translate(translationKeys.navigate, 'to navigate')}
+              text={translate('theme.search.keys.navigate', 'to navigate')}
             />
             <Shortcut
-              data-translation-key={translationKeys.select}
+              data-translation-key="theme.search.keys.select"
               combination="↵"
-              text={translate(translationKeys.select, 'to select')}
+              text={translate('theme.search.keys.select', 'to select')}
             />
             <Shortcut
-              data-translation-key={translationKeys.exit}
+              data-translation-key="theme.search.keys.exit"
               combination="Esc"
-              text={translate(translationKeys.exit, 'to exit')}
+              text={translate('theme.search.keys.exit', 'to exit')}
             />
           </Shortcuts>
           <CancelSearch onClick={onClose} />

package/src/components/Search/SearchTrigger.tsx

@@ -15,16 +15,14 @@ export function SearchTrigger({
 }): JSX.Element {
   const themeSettings = useThemeConfig();
   const { translate } = useTranslate();
-  const translationKeys = {
-    label: 'theme.search.navbar.label',
-  };
+
   const keyShortcuts = themeSettings?.search?.shortcuts ?? ['/'];
 
   return (
     <Wrapper data-component-name="Search/SearchTrigger" onClick={onClick} className={className}>
       <SearchIconSmall />
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, 'Search')}
+      <Label data-translation-key="theme.search.navbar.label">
+        {translate('theme.search.navbar.label', 'Search')}
       </Label>
       <ShortcutKey keyShortcuts={keyShortcuts} />
     </Wrapper>

package/src/components/Search/SuggestedPages.tsx

@@ -9,16 +9,12 @@ import { useTranslate } from '@portal/hooks';
 export function SuggestedPages({ className }: { className?: string }) {
   const pages = useSuggestedPages();
   const { translate } = useTranslate();
-  const translationKeys = {
-    title: 'theme.search.suggested',
-  };
-
   if (!pages.length) return null;
 
   return (
     <Wrapper data-component-name="Search/SuggestedPages" className={className}>
-      <Title data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, 'Suggested pages')}
+      <Title data-translation-key="theme.search.suggested">
+        {translate('theme.search.suggested', 'Suggested pages')}
       </Title>
       <SuggestedItems>
         {pages.map(

package/src/components/Sidebar/DrilldownMenu.tsx

@@ -15,19 +15,16 @@ export function DrilldownMenu({
   className,
 }: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element {
   const { translate } = useTranslate();
-  const translationKeys = {
-    backLabel: 'theme.sidebar.menu.backLabel',
-  };
   const label =
     item.label === prevActiveItem?.label || !prevActiveItem?.label
-      ? translate(translationKeys.backLabel, 'Back')
+      ? translate('theme.sidebar.menu.backLabel', 'Back')
       : prevActiveItem?.label;
 
   return (
     <MenuContainer data-component-name="Sidebar/DrilldownMenu" className={className}>
       <MenuContent>
         <MenuWrapper>
-          <BackButton back={back} data-translation-key={translationKeys.backLabel}>
+          <BackButton back={back} data-translation-key="theme.sidebar.menu.backLabel">
             {label}
           </BackButton>
           <MenuLinkItem item={item}>