@redocly/theme 0.60.0-next.1 → 0.60.0-next.2

package/lib/markdoc/components/Cards/variables.dark.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cardsDarkMode = void 0;
 const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
 exports.cardsDarkMode = (0, styled_components_1.css) `
   --card-icon-border-color: var(--color-warm-grey-4);
   --card-icon-bg-color: var(--color-warm-grey-3);
@@ -24,4 +25,5 @@ exports.cardsDarkMode = (0, styled_components_1.css) `
     --card-box-shadow-hover: 0px 14px 64px -4px #0000001F, 0px 8px 22px -6px #0000001F;
   }
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.dark.js.map

package/lib/markdoc/components/Cards/variables.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cards = void 0;
 const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
 exports.cards = (0, styled_components_1.css) `
   --cards-gap: var(--spacing-sm);
 
@@ -68,4 +69,5 @@ exports.cards = (0, styled_components_1.css) `
   }
 
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */ 
 //# sourceMappingURL=variables.js.map

package/lib/markdoc/components/CodeWalkthrough/CodePanelHeader.js

@@ -162,6 +162,7 @@ const Tab = styled_components_1.default.button `
           }
         `}
 `;
+// eslint-disable-next-line no-warning-comments
 // code-walk-todo: figure it our why we could not do it differently
 const StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
   --md-list-left-padding: var(--dropdown-menu-padding);

package/lib/markdoc/tags/code-walkthrough.js

@@ -63,6 +63,7 @@ exports.codeWalkthrough = {
         },
         validate(node) {
             const errors = [];
+            /* eslint-disable-next-line no-warning-comments */
             // code-walk-todo: validate when/unless for steps, toggles, inputs, and chunks
             const toggleIds = Object.keys(collectTogglesFromChildren(node.children));
             if ((0, utils_1.isObject)(node.attributes.filters)) {

package/lib/markdoc/tags/html.js

@@ -14,6 +14,7 @@ exports.html = {
             name: { type: String, required: true },
             attrs: { type: Object },
         },
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         transform(node, config) {
             const { name, attrs } = node.attributes;
             const children = node.transformChildren(config);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.60.0-next.1",
+  "version": "0.60.0-next.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Button/Button.tsx

@@ -32,6 +32,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   iconPosition?: 'left' | 'right';
   title?: string;
   tabIndex?: number;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   onClick?: (e?: any) => void;
   ref?: React.Ref<HTMLButtonElement>;
 }

package/src/components/Buttons/ConnectMCPButton.tsx

@@ -13,7 +13,7 @@ import { VSCodeIcon } from '@redocly/theme/icons/VSCodeIcon/VSCodeIcon';
 import { CopyIcon } from '@redocly/theme/icons/CopyIcon/CopyIcon';
 import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
 import { ConnectIcon } from '@redocly/theme/icons/ConnectIcon/ConnectIcon';
-import { useConnectMCPButton } from '@redocly/theme/core/hooks/use-connect-mcp-button';
+import { useConnectMCPButton } from '@redocly/theme/core/hooks';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 type TriggerButtonProps = {

package/src/components/Buttons/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const aiAssistantButton = css`
   /**
    * @tokens AI Assistant Button
@@ -46,6 +47,7 @@ export const aiAssistantButton = css`
   /* Transition */
   --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */
 
 export const connectMCPButton = css`
   /**

package/src/components/Catalog/CatalogCardView/CatalogCard.tsx

@@ -18,7 +18,8 @@ export type CatalogCardProps = {
 };
 
 export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.Element {
-  const { useTelemetry } = useThemeHooks();
+  const { useTelemetry, useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
   const telemetry = useTelemetry();
   const pathPrefix = getPathPrefix();
 
@@ -49,7 +50,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
 
         <CardMetadataSection>
           <MetadataRow>
-            <MetadataLabel>Domains:</MetadataLabel>
+            <MetadataLabel>{translate('catalog.metadata.domains', 'Domains:')}</MetadataLabel>
             <CatalogTagsWithTooltip
               items={entity.domains?.map((domain) => domain.title) || []}
               tagProps={{
@@ -64,7 +65,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
           </MetadataRow>
 
           <MetadataRow>
-            <MetadataLabel>Owners:</MetadataLabel>
+            <MetadataLabel>{translate('catalog.metadata.owners', 'Owners:')}</MetadataLabel>
             <CatalogTagsWithTooltip
               items={entity.owners?.map((owner) => owner.key) || []}
               tagProps={{

package/src/components/Catalog/CatalogEntity/CatalogEntity.tsx

@@ -22,7 +22,9 @@ import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/Ca
 import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
 
 export type CatalogEntityProps = {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   RedocSchema: React.ComponentType<any>;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   StoreProvider: React.ComponentType<any>;
   GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
 };
@@ -49,7 +51,9 @@ const renderFirstColumnEntitySection = (entity: BffCatalogEntity): React.ReactEl
 const renderDataSchemaSection = (
   entity: BffCatalogEntity,
   relatedEntity: BffCatalogRelatedEntity | null,
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   RedocSchema: React.ComponentType<any>,
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   StoreProvider: React.ComponentType<any>,
   GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>,
 ): React.ReactElement | null => {

package/src/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { useColorSwitcher, useThemeHooks } from '@redocly/theme/core/hooks';
-import { useGraph } from '@redocly/theme/core/hooks/catalog/useGraph';
+import { useGraph } from '@redocly/theme/core/hooks';
 import { CatalogEntityRelationsNode } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode';
 import { CatalogEntityRelationsEdge } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsEdge';
 import { xyflow } from '@redocly/theme/core/styles';

package/src/components/Catalog/CatalogEntity/CatalogEntityLinks.tsx

@@ -6,12 +6,16 @@ import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
 import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
 import { Link } from '@redocly/theme/components/Link/Link';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type CatalogEntityLinksProps = {
   entity: BffCatalogEntity;
 };
 
 export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const links = Object.entries(entity.links || []);
 
   if (!links.length) {
@@ -20,7 +24,7 @@ export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
 
   return (
     <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityLinks">
-      <Heading>Links</Heading>
+      <Heading>{translate('catalog.links.label', 'Links')}</Heading>
       {links.map(([key, value]) => (
         <Link key={key} color="var(--catalog-metadata-link-color)" to={value.url} target="_blank">
           <CatalogEntityInfoBar

package/src/components/Catalog/CatalogEntity/CatalogEntityMetadata.tsx

@@ -14,6 +14,7 @@ export type CatalogEntityMetadataProps = {
   entity: BffCatalogEntity;
 };
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 function renderMetadataValue(value: any): React.JSX.Element {
   if (isPlainObject(value)) {
     return <JsonViewerWrapper data={value} expandLevel={3} controls={false} />;

package/src/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath.tsx

@@ -4,12 +4,16 @@ import styled from 'styled-components';
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
 import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type CatalogEntityMethodAndPathProps = {
   entity: BffCatalogEntity;
 };
 
 export function CatalogEntityMethodAndPath({ entity }: CatalogEntityMethodAndPathProps) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const method = entity.metadata?.method;
   const path = entity.metadata?.path;
 
@@ -19,7 +23,7 @@ export function CatalogEntityMethodAndPath({ entity }: CatalogEntityMethodAndPat
 
   return (
     <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMethodAndPath">
-      <Heading>Method & Path</Heading>
+      <Heading>{translate('catalog.methodAndPath.label', 'Method & Path')}</Heading>
       <CatalogEntityInfoBar
         leftContent={
           <Label>

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty.tsx

@@ -4,12 +4,16 @@ import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { SlackIcon } from '@redocly/theme/icons/SlackIcon/SlackIcon';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type ContactPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function ContactProperty({ entity }: ContactPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const channels = entity.contact?.slack?.channels;
 
   return (
@@ -18,7 +22,7 @@ export function ContactProperty({ entity }: ContactPropertyProps): JSX.Element {
         header={
           <>
             <SlackIcon />
-            Slack channels
+            {translate('catalog.contact.label', 'Slack channels')}
           </>
         }
         content={

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty.tsx

@@ -4,12 +4,16 @@ import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type DomainsPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function DomainsProperty({ entity }: DomainsPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const { domains = [] } = entity;
 
   return (
@@ -18,7 +22,7 @@ export function DomainsProperty({ entity }: DomainsPropertyProps): JSX.Element {
         header={
           <>
             <GraphIcon />
-            Domains
+            {translate('catalog.domains.label', 'Domains')}
           </>
         }
         content={

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty.tsx

@@ -5,6 +5,7 @@ import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIc
 import { capitalize } from '@redocly/theme/core/utils';
 import { CatalogEntityTypeIcon } from '@redocly/theme/components/Catalog/CatalogEntityTypeIcon';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type EntityTypePropertyProps = {
   entity: BffCatalogEntity;
@@ -19,13 +20,16 @@ const formatEntityType = (entityType: string) => {
 };
 
 export function EntityTypeProperty({ entity }: EntityTypePropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty">
       <CatalogEntityPropertyCard
         header={
           <>
             <EntityTypeIcon />
-            Entity type
+            {translate('catalog.entityType.label', 'Entity type')}
           </>
         }
         content={

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty.tsx

@@ -4,19 +4,23 @@ import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { NotesIcon } from '@redocly/theme/icons/NotesIcon/NotesIcon';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type FormatPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function FormatProperty({ entity }: FormatPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty">
       <CatalogEntityPropertyCard
         header={
           <>
             <NotesIcon />
-            Format
+            {translate('catalog.format.label', 'Format')}
           </>
         }
         content={

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/GitProperty.tsx

@@ -5,12 +5,16 @@ import { GithubIcon } from '@redocly/theme/icons/GithubIcon/GithubIcon';
 import { removeLeadingSlash } from '@redocly/theme/core/utils';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type GitPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function GitProperty({ entity }: GitPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const git = entity.git;
 
   return (
@@ -19,7 +23,7 @@ export function GitProperty({ entity }: GitPropertyProps): JSX.Element {
         header={
           <>
             <GithubIcon />
-            Repositories
+            {translate('catalog.repositories.label', 'Repositories')}
           </>
         }
         content={

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty.tsx

@@ -4,12 +4,16 @@ import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type OwnersPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function OwnersProperty({ entity }: OwnersPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const { owners = [] } = entity;
 
   return (
@@ -18,7 +22,7 @@ export function OwnersProperty({ entity }: OwnersPropertyProps): JSX.Element {
         header={
           <>
             <PeopleIcon />
-            Owners
+            {translate('catalog.owners.label', 'Owners')}
           </>
         }
         content={

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.tsx

@@ -4,19 +4,23 @@ import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { TagsIcon } from '@redocly/theme/icons/TagsIcon/TagsIcon';
 import { CatalogTagsWithTooltip } from '@redocly/theme';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type TagsPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function TagsProperty({ entity }: TagsPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty">
       <CatalogEntityPropertyCard
         header={
           <>
             <TagsIcon />
-            Tags
+            {translate('catalog.tags.label', 'Tags')}
           </>
         }
         content={

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/UserEmailProperty.tsx

@@ -4,12 +4,16 @@ import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { EmailIcon } from '@redocly/theme/icons/EmailIcon/EmailIcon';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { Email } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogUserEntityCell';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type UserEmailPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function UserEmailProperty({ entity }: UserEmailPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const email = entity.metadata?.email;
 
   return (
@@ -18,7 +22,7 @@ export function UserEmailProperty({ entity }: UserEmailPropertyProps): JSX.Eleme
         header={
           <>
             <EmailIcon />
-            Email
+            {translate('catalog.email.label', 'Email')}
           </>
         }
         content={<Email>{email}</Email>}

package/src/components/Catalog/CatalogEntity/CatalogEntitySchema.tsx

@@ -4,14 +4,16 @@ import * as Sampler from 'openapi-sampler';
 
 import { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { useCatalogEntitySchema } from '@redocly/theme/core/hooks/catalog/useCatalogEntitySchema';
+import { useCatalogEntitySchema } from '@redocly/theme/core/hooks';
 import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
 
 export type CatalogEntitySchemaProps = {
   entity: BffCatalogEntity;
   relatedEntity: BffCatalogRelatedEntity | null;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   RedocSchema: React.ComponentType<any>;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   StoreProvider: React.ComponentType<any>;
   GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
 };

package/src/components/Catalog/CatalogFilter/CatalogFilterDateRange.tsx

@@ -52,7 +52,7 @@ export function CatalogFilterDateRange({
         <FilterOptions>
           <DateRangeWrapper>
             <DateRangeRow>
-              <span>From:</span>
+              <span>{translate('filter.dateRange.from', 'From:')}</span>
               <DatePicker
                 closeCalendar={true}
                 format="y-MM-dd"
@@ -72,7 +72,7 @@ export function CatalogFilterDateRange({
               />
             </DateRangeRow>
             <DateRangeRow>
-              <span>To:</span>
+              <span>{translate('filter.dateRange.to', 'To:')}</span>
               <DatePicker
                 closeCalendar={true}
                 dayPlaceholder="DD"

package/src/components/Catalog/CatalogSelector.tsx

@@ -20,8 +20,8 @@ export function CatalogSelector({
   setSortOption,
 }: CatalogSelectorProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
-
   const { translate } = useTranslate();
+
   const navigate = useNavigate();
   const pathPrefix = getPathPrefix();
 
@@ -35,7 +35,7 @@ export function CatalogSelector({
 
   return (
     <CatalogSelectWrapper data-component-name="Catalog/CatalogSelector">
-      <CatalogSelectLabel>Catalogs</CatalogSelectLabel>
+      <CatalogSelectLabel>{translate('catalog.catalogs.label', 'Catalogs')}</CatalogSelectLabel>
       <CatalogSelect
         value={selectedCatalogItem?.slug}
         options={options}

package/src/components/Catalog/CatalogSortButton.tsx

@@ -7,6 +7,7 @@ import { DescSortIcon } from '@redocly/theme/icons/DescSortIcon/DescSortIcon';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type CatalogSortButtonProps = {
   onSortChange: (sortOption: SortOption | null) => void;
@@ -20,6 +21,9 @@ export function CatalogSortButton({
   onSortChange: (sortOption: SortOption | null) => void;
   currentSort?: SortOption | null;
 }) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const toggleSort = useCallback(
     (field: string): void => {
       const newSort = currentSort === `-${field}` ? field : `-${field}`;
@@ -36,7 +40,7 @@ export function CatalogSortButton({
             <SortIconWrapper>
               {currentSort === '-title' ? <DescSortIcon /> : <AscSortIcon />}
             </SortIconWrapper>
-            <SortText>Sort</SortText>
+            <SortText>{translate('catalog.sort', 'Sort')}</SortText>
           </SortTrigger>
         }
         alignment="end"

package/src/components/Catalog/CatalogTableView/CatalogTableHeaderCell.tsx

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { SortOption } from '@redocly/theme/core/types';
 import { CaretDownIcon } from '@redocly/theme/icons/CaretDownIcon/CaretDownIcon';
 import { CaretUpIcon } from '@redocly/theme/icons/CaretUpIcon/CaretUpIcon';
-import { useCatalogTableHeaderCellActions } from '@redocly/theme/core/hooks/catalog/useCatalogTableHeaderCellActions';
+import { useCatalogTableHeaderCellActions } from '@redocly/theme/core/hooks';
 import {
   BaseEntity,
   CatalogColumn,

package/src/components/Catalog/CatalogTableView/CatalogTableViewRow.tsx

@@ -7,7 +7,7 @@ import { CatalogOwnersCell } from '@redocly/theme/components/Catalog/CatalogTabl
 import { CatalogDomainsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogDomainsCell';
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
 import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTagsCell';
-import { useCatalogTableViewRow } from '@redocly/theme/core/hooks/catalog/useCatalogTableViewRow';
+import { useCatalogTableViewRow } from '@redocly/theme/core/hooks';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 
 import { Link } from '../../Link/Link';

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -5,6 +5,7 @@ import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
 import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
 import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type CatalogTagsWithTooltipProps = {
   items: string[];
@@ -19,10 +20,14 @@ export function CatalogTagsWithTooltip({
   showPlaceholder = true,
   tagProps,
 }: CatalogTagsWithTooltipProps): JSX.Element | null {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   if (!items || items.length === 0) {
     if (showPlaceholder) {
       return (
         <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
+          {/* eslint-disable-next-line theme/require-translate */}
           <Tag style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }} color="grey">
             N/A
           </Tag>
@@ -61,7 +66,9 @@ export function CatalogTagsWithTooltip({
           </Tag>
         ))}
 
-        <MoreTagsButton>+{remainingCount} more</MoreTagsButton>
+        <MoreTagsButton>
+          +{remainingCount} {translate('catalog.tags.more', 'more')}
+        </MoreTagsButton>
       </CatalogTagsWrapper>
     </TooltipComponent>
   );

package/src/components/Catalog/variables.dark.ts

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
 
 export const catalogDarkMode = css`
-  --catalog-avatar-bg-color: #3b3c45;
+  --catalog-avatar-bg-color: var(--color-warm-grey-4);
 `;

package/src/components/Catalog/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const catalog = css`
   /* === Catalog === */
   /**
@@ -284,7 +285,7 @@ export const catalog = css`
   --catalog-page-badge-line-height: var(--line-height-base);
 
   --catalog-page-badge-dot-size: 6px;
-  --catalog-page-badge-dot-border-color: #ffffff;
+  --catalog-page-badge-dot-border-color: var(--color-static-white);
 
   /**
     * @tokens Catalog table
@@ -405,8 +406,8 @@ export const catalog = css`
   --catalog-entity-relations-node-font-weight-root: 600;
 
   --catalog-entity-relations-node-root-bg-color: var(--color-blue-6);
-  --catalog-entity-relations-node-root-text-color: #ffffff;
-  --catalog-entity-relations-node-root-icon-color: #ffffff;
+  --catalog-entity-relations-node-root-text-color: var(--color-static-white);
+  --catalog-entity-relations-node-root-icon-color: var(--color-static-white);
   // @tokens End
 
   /**
@@ -427,3 +428,4 @@ export const catalog = css`
   --catalog-entity-relations-edge-label-line-height: 1.2;
   // @tokens End
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -13,6 +13,7 @@ export type CatalogClassicInfoBlockProps = {
     scorecardLevel?: string;
     scoreCardSlug?: string;
     scorecardLevelIdx?: number;
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     scorecardLevels?: Record<string, any>;
 
     [key: string]: unknown;

package/src/components/CatalogClassic/variables.ts

@@ -100,7 +100,7 @@ export const catalogClassic = css`
   --catalog-classic-page-badge-line-height: var(--line-height-base);
 
   --catalog-classic-page-badge-dot-size: 6px;
-  --catalog-classic-page-badge-dot-border-color: #ffffff;
+  --catalog-classic-page-badge-dot-border-color: var(--color-static-white);
 
   // @tokens End
 `;