@redocly/theme 0.58.0-next.5 → 0.58.0-next.6

package/lib/components/Catalog/Catalog.d.ts

@@ -1,11 +1,11 @@
 import { JSX } from 'react';
 import { CatalogEntityConfig } from '@redocly/config';
-import { BffCatalogEntityList } from '../../core/types';
-import { CatalogSwitcherItem } from '../../core/types/catalog';
+import { BffCatalogEntityList, CatalogSwitcherItem, CatalogViewMode } from '../../core/types';
 export type CatalogProps = {
     catalogConfig: CatalogEntityConfig;
     entitiesTypes: string[];
     initialEntitiesList?: BffCatalogEntityList;
     catalogSwitcherItems: CatalogSwitcherItem[];
+    initialViewMode?: CatalogViewMode;
 };
 export declare function Catalog(props: CatalogProps): JSX.Element;

package/lib/components/Catalog/Catalog.js

@@ -32,10 +32,10 @@ const customCatalogOptionsCasing = (str) => {
         .join(' ');
 };
 function Catalog(props) {
-    const { catalogConfig, entitiesTypes, initialEntitiesList, catalogSwitcherItems } = props;
+    const { catalogConfig, entitiesTypes, initialEntitiesList, catalogSwitcherItems, initialViewMode, } = props;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const { filters, searchQuery, setSearchQuery, filterQuery, sortOption, setSortOption, handleSortClick, isColumnSorted, viewMode, setViewMode, entitiesCounter, setEntitiesCounter, onChangeViewClick, onChangeCollapseSidebarClick, layout, collapsedSidebar, } = useCatalog(catalogConfig, (initialEntitiesList === null || initialEntitiesList === void 0 ? void 0 : initialEntitiesList.page.total) || 0);
+    const { filters, searchQuery, setSearchQuery, filterQuery, sortOption, setSortOption, handleSortClick, isColumnSorted, viewMode, setViewMode, entitiesCounter, setEntitiesCounter, onChangeViewClick, onChangeCollapseSidebarClick, layout, collapsedSidebar, } = useCatalog(catalogConfig, (initialEntitiesList === null || initialEntitiesList === void 0 ? void 0 : initialEntitiesList.page.total) || 0, initialViewMode);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/Catalog" },
             react_1.default.createElement(FiltersSidebar, { collapsed: collapsedSidebar, header: collapsedSidebar ? null : (react_1.default.createElement(CatalogSelector_1.CatalogSelector, { catalogSwitcherItems: catalogSwitcherItems, setSearchQuery: setSearchQuery, setSortOption: setSortOption })), menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setSearchQuery, filters: filters, filterTerm: searchQuery, hideSearch: true, showCounter: false, filterValuesCasing: customCatalogOptionsCasing }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),

package/lib/components/Catalog/CatalogCardView/CatalogCard.js

@@ -14,7 +14,6 @@ const ArrowUpRightIcon_1 = require("../../../icons/ArrowUpRightIcon/ArrowUpRight
 const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
 const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
 const utils_1 = require("../../../core/utils");
-const Tooltip_1 = require("../../../components/Tooltip/Tooltip");
 function CatalogCard({ entity, catalogConfig }) {
     var _a, _b, _c;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
@@ -26,15 +25,15 @@ function CatalogCard({ entity, catalogConfig }) {
         } },
         react_1.default.createElement(CardContent, null,
             react_1.default.createElement(CardHeader, null,
-                react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: entity.type, placement: "bottom", className: "catalog" },
-                    react_1.default.createElement(HeaderIconWrapper, null,
-                        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type, defaultColor: true }))),
-                react_1.default.createElement(CardTitle, null,
-                    react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title))),
+                react_1.default.createElement(HeaderIconWrapper, null,
+                    react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type })),
+                react_1.default.createElement(HeaderIconText, { entityType: entity.type }, entity.type)),
             react_1.default.createElement(CardDescription, null,
+                react_1.default.createElement(CardTitle, null,
+                    react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title)),
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, (_a = entity.summary) !== null && _a !== void 0 ? _a : '')),
             react_1.default.createElement(CardMetadataSection, null,
-                react_1.default.createElement(MetadataColumn, null,
+                react_1.default.createElement(MetadataRow, null,
                     react_1.default.createElement(MetadataLabel, null, "Domains:"),
                     react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: ((_b = entity.domains) === null || _b === void 0 ? void 0 : _b.map((domain) => domain.title)) || [], tagProps: {
                             style: {
@@ -44,7 +43,7 @@ function CatalogCard({ entity, catalogConfig }) {
                             icon: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: "var(--color-green-8)" }),
                             textTransform: 'none',
                         } })),
-                react_1.default.createElement(MetadataColumn, null,
+                react_1.default.createElement(MetadataRow, null,
                     react_1.default.createElement(MetadataLabel, null, "Owners:"),
                     react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { items: ((_c = entity.owners) === null || _c === void 0 ? void 0 : _c.map((owner) => owner.key)) || [], tagProps: {
                             style: {
@@ -81,6 +80,9 @@ const HeaderIconWrapper = styled_components_1.default.div `
   border: var(--catalog-card-icon-border-width) solid var(--catalog-card-icon-border-color);
   margin-right: var(--catalog-card-icon-margin-right);
 `;
+const HeaderIconText = styled_components_1.default.div `
+  color: ${({ entityType }) => `var(--catalog-entity-icon-color-${entityType})`};
+`;
 const CardHeader = styled_components_1.default.div `
   display: flex;
   align-items: center;
@@ -89,20 +91,20 @@ const MetadataLabel = styled_components_1.default.div `
   font-size: var(--catalog-metadata-label-font-size);
   font-weight: var(--catalog-metadata-label-font-weight);
   color: var(--catalog-metadata-label-color);
-  margin-bottom: var(--catalog-metadata-label-margin-bottom);
 `;
 const CardMetadataSection = styled_components_1.default.div `
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
   margin-top: var(--catalog-metadata-section-margin-top);
   gap: var(--catalog-metadata-section-gap);
   width: 100%;
 `;
-const MetadataColumn = styled_components_1.default.div `
+const MetadataRow = styled_components_1.default.div `
   display: flex;
-  flex-direction: column;
-  flex: 1;
-  width: calc(50% - var(--catalog-metadata-column-half-gap)); /* 50% minus half the gap */
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--catalog-metadata-row-gap);
 `;
 const ArrowCircle = styled_components_1.default.div `
   width: var(--catalog-arrow-circle-size);
@@ -136,7 +138,6 @@ const Divider = styled_components_1.default.div `
   background-color: var(--catalog-card-divider-color);
 `;
 const CatalogCardWrapper = styled_components_1.default.div `
-  height: var(--catalog-card-height);
   color: var(--catalog-card-text-color);
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);

package/lib/components/Catalog/CatalogEntity/CatalogEntityLinks.js

@@ -26,7 +26,6 @@ function CatalogEntityLinks({ entity }) {
 const LinksWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;

package/lib/components/Catalog/CatalogEntity/CatalogEntityMetadata.js

@@ -82,7 +82,6 @@ const JsonViewerWrapper = (0, styled_components_1.default)(JsonViewer_1.JsonView
 const MetadataWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;

package/lib/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath.js

@@ -31,7 +31,6 @@ const PathLabel = styled_components_1.default.label `
 const LinksWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard.js

@@ -45,7 +45,7 @@ const CardHeader = styled_components_1.default.div `
 const CardContent = styled_components_1.default.div `
   flex: 1;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   gap: var(--catalog-card-content-gap);
   flex-wrap: wrap;
   color: var(--text-color-primary);

package/lib/components/Catalog/CatalogEntityIcon.js

@@ -9,8 +9,8 @@ const CodeIcon_1 = require("../../icons/CodeIcon/CodeIcon");
 const GraphIcon_1 = require("../../icons/GraphIcon/GraphIcon");
 const PeopleIcon_1 = require("../../icons/PeopleIcon/PeopleIcon");
 const UserIcon_1 = require("../../icons/UserIcon/UserIcon");
-const NetworkIcon_1 = require("../../icons/NetworkIcon/NetworkIcon");
 const MoleculesIcon_1 = require("../../icons/MoleculesIcon/MoleculesIcon");
+const HierarchyIcon_1 = require("../../icons/HierarchyIcon/HierarchyIcon");
 const Image_1 = require("../../components/Image/Image");
 const core_1 = require("../../core");
 const NoteIcon_1 = require("../../icons/NoteIcon/NoteIcon");
@@ -25,7 +25,7 @@ const getEntityIcon = ({ entityType, defaultColor, forceColor, entitiesCatalogCo
             team: react_1.default.createElement(PeopleIcon_1.PeopleIcon, { color: iconColor }),
             user: react_1.default.createElement(UserIcon_1.UserIcon, { color: iconColor }),
             'api-description': react_1.default.createElement(NoteIcon_1.NoteIcon, { color: iconColor }),
-            'data-schema': react_1.default.createElement(NetworkIcon_1.NetworkIcon, { color: iconColor }),
+            'data-schema': react_1.default.createElement(HierarchyIcon_1.HierarchyIcon, { color: iconColor }),
             'api-operation': react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, { color: iconColor }),
         };
         return entityIconMap[entityType];

package/lib/components/Catalog/CatalogSelector.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { Select } from '../../components/Select/Select';
-import { CatalogSwitcherItem, SortOption } from '../../core/types/catalog';
+import { CatalogSwitcherItem, SortOption } from '../../core/types';
 export type CatalogSelectorProps = {
     catalogSwitcherItems: CatalogSwitcherItem[];
     setSearchQuery: (query: string) => void;

package/lib/components/Catalog/CatalogTableView/CatalogEntityCell.js

@@ -10,7 +10,7 @@ const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight
 const CatalogEntityTypeIcon_1 = require("../../../components/Catalog/CatalogEntityTypeIcon");
 function CatalogEntityCell({ entity }) {
     return (react_1.default.createElement(EntityTitleCellWrapper, { "data-component-name": "Catalog/CatalogTableView/CatalogEntityCell" },
-        react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type, defaultColor: true }),
+        react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type }),
         react_1.default.createElement(EntityTitleContent, null,
             react_1.default.createElement(EntityTitle, { "data-component-name": "Catalog/CatalogTableView/CatalogEntityTitle" },
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title)),

package/lib/components/Catalog/CatalogViewModeToggle.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CatalogViewMode } from '../../core/types/catalog';
+import { CatalogViewMode } from '../../core/types';
 export type CatalogViewModeToggleProps = {
     viewMode: CatalogViewMode;
     onViewModeChange: (mode: CatalogViewMode) => void;

package/lib/components/Catalog/variables.js

@@ -139,7 +139,7 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog tags
     */
-  --catalog-tags-wrapper-gap: 4px;
+  --catalog-tags-wrapper-gap: var(--spacing-xs) calc(var(--spacing-xs) - 5px);
   --catalog-tags-more-button-font-size: var(--font-size-base);
   --catalog-tags-more-button-margin-left: 4px;
   --catalog-tags-placeholder-bg-color: var(--bg-color);
@@ -199,7 +199,7 @@ exports.catalog = (0, styled_components_1.css) `
     */
   --catalog-card-height: 241px;
   --catalog-card-min-width: 400px;
-  --catalog-card-padding-vertical: var(--spacing-md);
+  --catalog-card-padding-vertical: var(--spacing-base);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
   --catalog-card-text-color: var(--text-color-secondary);
@@ -229,12 +229,11 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog metadata
     */
-  --catalog-metadata-section-margin-top: var(--spacing-md);
-  --catalog-metadata-section-gap: var(--spacing-lg);
+  --catalog-metadata-section-margin-top: var(--spacing-base);
+  --catalog-metadata-section-gap: var(--spacing-xs);
   --catalog-metadata-label-font-size: var(--font-size-base);
   --catalog-metadata-label-font-weight: var(--font-weight-medium);
   --catalog-metadata-label-color: var(--text-color-secondary);
-  --catalog-metadata-label-margin-bottom: var(--spacing-unit);
   --catalog-metadata-column-half-gap: var(--spacing-sm);
   --catalog-metadata-heading-size: var(--font-size-md);
 
@@ -269,7 +268,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-card-description-line-height: var(--line-height-base);
   --catalog-card-description-font-weight: var(--font-weight-regular);
   --catalog-card-description-height: 62px;
-  --catalog-card-description-margin-top: 2px;
+  --catalog-card-description-margin-top: 8px;
 
   --catalog-card-content-gap: var(--spacing-xs);
   --catalog-card-content-gap-vertical: var(--spacing-sm);

package/lib/core/types/hooks.d.ts

@@ -4,7 +4,7 @@ import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
-import type { UseCatalogResponse, CatalogApiResults, CatalogApiParams, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse } from './catalog';
+import type { UseCatalogResponse, CatalogApiResults, CatalogApiParams, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, CatalogViewMode } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
 import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem } from './search';
@@ -112,7 +112,7 @@ export type ThemeHooks = {
         prevPage?: ResolvedNavItemWithLink;
         nextPage?: ResolvedNavItemWithLink;
     } | undefined;
-    useCatalog: (config?: CatalogEntityConfig, entitiesCounterInitial?: number) => UseCatalogResponse;
+    useCatalog: (config?: CatalogEntityConfig, entitiesCounterInitial?: number, initialViewMode?: CatalogViewMode) => UseCatalogResponse;
     useCatalogSort: () => UseCatalogSortResponse;
     useCatalogSearch: () => UseCatalogSearchResponse;
     useFetchCatalogEntities: (params: CatalogApiParams, initialData?: BffCatalogEntityList) => CatalogApiResults<BffCatalogEntity, BffCatalogEntityList>;

package/lib/icons/HierarchyIcon/HierarchyIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const HierarchyIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/HierarchyIcon/HierarchyIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HierarchyIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18" }, props),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.0625 7.3125H15.1875C15.4858 7.31216 15.7717 7.19352 15.9826 6.98262C16.1935 6.77171 16.3122 6.48576 16.3125 6.1875V2.8125C16.3122 2.51424 16.1935 2.22829 15.9826 2.01738C15.7717 1.80648 15.4858 1.68784 15.1875 1.6875H2.8125C2.51424 1.68784 2.22829 1.80648 2.01738 2.01738C1.80648 2.22829 1.68784 2.51424 1.6875 2.8125V6.1875C1.68784 6.48576 1.80648 6.77171 2.01738 6.98262C2.22829 7.19352 2.51424 7.31216 2.8125 7.3125H3.9375H5.0625ZM15.1875 2.8125H2.8125V6.1875H15.1875V2.8125Z" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.1875 10.6875H9.5625C9.26424 10.6878 8.97829 10.8065 8.76738 11.0174C8.55648 11.2283 8.43784 11.5142 8.4375 11.8125V12.9375H5.0625V10.4546V9.5625V7.3125H3.9375V10.4546V12.9375C3.93784 13.2358 4.05648 13.5217 4.26738 13.7326C4.47829 13.9435 4.76424 14.0622 5.0625 14.0625H8.4375V15.1875C8.43784 15.4858 8.55648 15.7717 8.76738 15.9826C8.97829 16.1935 9.26424 16.3122 9.5625 16.3125H15.1875C15.4858 16.3122 15.7717 16.1935 15.9826 15.9826C16.1935 15.7717 16.3122 15.4858 16.3125 15.1875V11.8125C16.3122 11.5142 16.1935 11.2283 15.9826 11.0174C15.7717 10.8065 15.4858 10.6878 15.1875 10.6875ZM9.5625 11.8125V15.1875H15.1875V11.8125H9.5625Z" })));
+exports.HierarchyIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/HierarchyIcon/HierarchyIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=HierarchyIcon.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.58.0-next.5",
+  "version": "0.58.0-next.6",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -87,8 +87,8 @@
     "openapi-sampler": "1.6.1",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.33.0",
-    "@redocly/realm-asyncapi-sdk": "0.4.0-next.1"
+    "@redocly/config": "0.34.0",
+    "@redocly/realm-asyncapi-sdk": "0.4.0-next.2"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Catalog/Catalog.tsx

@@ -2,13 +2,16 @@ import React, { JSX } from 'react';
 import styled from 'styled-components';
 import { CatalogEntityConfig } from '@redocly/config';
 
-import { BffCatalogEntityList } from '@redocly/theme/core/types';
+import {
+  BffCatalogEntityList,
+  CatalogSwitcherItem,
+  CatalogViewMode,
+} from '@redocly/theme/core/types';
 import { breakpoints } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { H3 } from '@redocly/theme/components/Typography/H3';
 import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
 import { Sidebar, SidebarHeader } from '@redocly/theme/components/Sidebar/Sidebar';
-import { CatalogSwitcherItem } from '@redocly/theme/core/types/catalog';
 import { CatalogSelector } from '@redocly/theme/components/Catalog/CatalogSelector';
 import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
@@ -22,6 +25,7 @@ export type CatalogProps = {
   entitiesTypes: string[];
   initialEntitiesList?: BffCatalogEntityList;
   catalogSwitcherItems: CatalogSwitcherItem[];
+  initialViewMode?: CatalogViewMode;
 };
 
 const customCatalogOptionsCasing = (str: string): string => {
@@ -39,7 +43,13 @@ const customCatalogOptionsCasing = (str: string): string => {
 };
 
 export function Catalog(props: CatalogProps): JSX.Element {
-  const { catalogConfig, entitiesTypes, initialEntitiesList, catalogSwitcherItems } = props;
+  const {
+    catalogConfig,
+    entitiesTypes,
+    initialEntitiesList,
+    catalogSwitcherItems,
+    initialViewMode,
+  } = props;
 
   const { useTranslate, useCatalog } = useThemeHooks();
 
@@ -62,7 +72,7 @@ export function Catalog(props: CatalogProps): JSX.Element {
     onChangeCollapseSidebarClick,
     layout,
     collapsedSidebar,
-  } = useCatalog(catalogConfig, initialEntitiesList?.page.total || 0);
+  } = useCatalog(catalogConfig, initialEntitiesList?.page.total || 0, initialViewMode);
 
   return (
     <>

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

@@ -11,7 +11,6 @@ import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpR
 import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
 import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
 import { getPathPrefix } from '@redocly/theme/core/utils';
-import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
 
 export type CatalogCardProps = {
   entity: BffCatalogEntity;
@@ -35,22 +34,21 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
     >
       <CardContent>
         <CardHeader>
-          <TooltipComponent tip={entity.type} placement="bottom" className="catalog">
-            <HeaderIconWrapper>
-              <CatalogEntityIcon entityType={entity.type} defaultColor={true} />
-            </HeaderIconWrapper>
-          </TooltipComponent>
-          <CardTitle>
-            <CatalogHighlight>{entity.title}</CatalogHighlight>
-          </CardTitle>
+          <HeaderIconWrapper>
+            <CatalogEntityIcon entityType={entity.type} />
+          </HeaderIconWrapper>
+          <HeaderIconText entityType={entity.type}>{entity.type}</HeaderIconText>
         </CardHeader>
 
         <CardDescription>
+          <CardTitle>
+            <CatalogHighlight>{entity.title}</CatalogHighlight>
+          </CardTitle>
           <CatalogHighlight>{entity.summary ?? ''}</CatalogHighlight>
         </CardDescription>
 
         <CardMetadataSection>
-          <MetadataColumn>
+          <MetadataRow>
             <MetadataLabel>Domains:</MetadataLabel>
             <CatalogTagsWithTooltip
               items={entity.domains?.map((domain) => domain.title) || []}
@@ -63,9 +61,9 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
                 textTransform: 'none',
               }}
             />
-          </MetadataColumn>
+          </MetadataRow>
 
-          <MetadataColumn>
+          <MetadataRow>
             <MetadataLabel>Owners:</MetadataLabel>
             <CatalogTagsWithTooltip
               items={entity.owners?.map((owner) => owner.key) || []}
@@ -78,7 +76,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
                 textTransform: 'none',
               }}
             />
-          </MetadataColumn>
+          </MetadataRow>
         </CardMetadataSection>
       </CardContent>
 
@@ -121,6 +119,10 @@ const HeaderIconWrapper = styled.div`
   margin-right: var(--catalog-card-icon-margin-right);
 `;
 
+const HeaderIconText = styled.div<{ entityType: string }>`
+  color: ${({ entityType }) => `var(--catalog-entity-icon-color-${entityType})`};
+`;
+
 const CardHeader = styled.div`
   display: flex;
   align-items: center;
@@ -130,22 +132,22 @@ const MetadataLabel = styled.div`
   font-size: var(--catalog-metadata-label-font-size);
   font-weight: var(--catalog-metadata-label-font-weight);
   color: var(--catalog-metadata-label-color);
-  margin-bottom: var(--catalog-metadata-label-margin-bottom);
 `;
 
 const CardMetadataSection = styled.div`
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
   margin-top: var(--catalog-metadata-section-margin-top);
   gap: var(--catalog-metadata-section-gap);
   width: 100%;
 `;
 
-const MetadataColumn = styled.div`
+const MetadataRow = styled.div`
   display: flex;
-  flex-direction: column;
-  flex: 1;
-  width: calc(50% - var(--catalog-metadata-column-half-gap)); /* 50% minus half the gap */
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--catalog-metadata-row-gap);
 `;
 
 const ArrowCircle = styled.div`
@@ -184,7 +186,6 @@ const Divider = styled.div`
 `;
 
 const CatalogCardWrapper = styled.div`
-  height: var(--catalog-card-height);
   color: var(--catalog-card-text-color);
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);

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

@@ -41,7 +41,6 @@ export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
 const LinksWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;

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

@@ -81,7 +81,6 @@ const JsonViewerWrapper = styled(JsonViewer)`
 const MetadataWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;

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

@@ -45,7 +45,6 @@ const PathLabel = styled.label`
 const LinksWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;

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

@@ -64,7 +64,7 @@ const CardHeader = styled.div`
 const CardContent = styled.div`
   flex: 1;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   gap: var(--catalog-card-content-gap);
   flex-wrap: wrap;
   color: var(--text-color-primary);

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -6,8 +6,8 @@ import { CodeIcon } from '@redocly/theme/icons/CodeIcon/CodeIcon';
 import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
 import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
 import { UserIcon } from '@redocly/theme/icons/UserIcon/UserIcon';
-import { NetworkIcon } from '@redocly/theme/icons/NetworkIcon/NetworkIcon';
 import { MoleculesIcon } from '@redocly/theme/icons/MoleculesIcon/MoleculesIcon';
+import { HierarchyIcon } from '@redocly/theme/icons/HierarchyIcon/HierarchyIcon';
 import { Image } from '@redocly/theme/components/Image/Image';
 import { PREDEFINED_ENTITY_TYPES, useThemeConfig } from '@redocly/theme/core';
 import { NoteIcon } from '@redocly/theme/icons/NoteIcon/NoteIcon';
@@ -38,7 +38,7 @@ const getEntityIcon = ({
       team: <PeopleIcon color={iconColor} />,
       user: <UserIcon color={iconColor} />,
       'api-description': <NoteIcon color={iconColor} />,
-      'data-schema': <NetworkIcon color={iconColor} />,
+      'data-schema': <HierarchyIcon color={iconColor} />,
       'api-operation': <MoleculesIcon color={iconColor} />,
     };
 

package/src/components/Catalog/CatalogSelector.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { Select } from '@redocly/theme/components/Select/Select';
-import { CatalogSwitcherItem, SortOption } from '@redocly/theme/core/types/catalog';
+import { CatalogSwitcherItem, SortOption } from '@redocly/theme/core/types';
 import { getPathPrefix } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';

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

@@ -13,7 +13,7 @@ export type CatalogEntityCellProps<T extends Entity> = {
 export function CatalogEntityCell<T extends Entity>({ entity }: CatalogEntityCellProps<T>) {
   return (
     <EntityTitleCellWrapper data-component-name="Catalog/CatalogTableView/CatalogEntityCell">
-      <CatalogEntityTypeIcon entityType={entity.type} defaultColor={true} />
+      <CatalogEntityTypeIcon entityType={entity.type} />
       <EntityTitleContent>
         <EntityTitle data-component-name="Catalog/CatalogTableView/CatalogEntityTitle">
           <CatalogHighlight>{entity.title}</CatalogHighlight>

package/src/components/Catalog/CatalogViewModeToggle.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { TableIcon } from '@redocly/theme/icons/TableIcon/TableIcon';
 import { CardsIcon } from '@redocly/theme/icons/CardsIcon/CardsIcon';
-import { CatalogViewMode } from '@redocly/theme/core/types/catalog';
+import { CatalogViewMode } from '@redocly/theme/core/types';
 
 function useViewMode(initialViewMode: CatalogViewMode) {
   const [viewMode, setViewMode] = useState<CatalogViewMode | null>(null);

package/src/components/Catalog/variables.ts

@@ -137,7 +137,7 @@ export const catalog = css`
   /**
     * @tokens Catalog tags
     */
-  --catalog-tags-wrapper-gap: 4px;
+  --catalog-tags-wrapper-gap: var(--spacing-xs) calc(var(--spacing-xs) - 5px);
   --catalog-tags-more-button-font-size: var(--font-size-base);
   --catalog-tags-more-button-margin-left: 4px;
   --catalog-tags-placeholder-bg-color: var(--bg-color);
@@ -197,7 +197,7 @@ export const catalog = css`
     */
   --catalog-card-height: 241px;
   --catalog-card-min-width: 400px;
-  --catalog-card-padding-vertical: var(--spacing-md);
+  --catalog-card-padding-vertical: var(--spacing-base);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
   --catalog-card-text-color: var(--text-color-secondary);
@@ -227,12 +227,11 @@ export const catalog = css`
   /**
     * @tokens Catalog metadata
     */
-  --catalog-metadata-section-margin-top: var(--spacing-md);
-  --catalog-metadata-section-gap: var(--spacing-lg);
+  --catalog-metadata-section-margin-top: var(--spacing-base);
+  --catalog-metadata-section-gap: var(--spacing-xs);
   --catalog-metadata-label-font-size: var(--font-size-base);
   --catalog-metadata-label-font-weight: var(--font-weight-medium);
   --catalog-metadata-label-color: var(--text-color-secondary);
-  --catalog-metadata-label-margin-bottom: var(--spacing-unit);
   --catalog-metadata-column-half-gap: var(--spacing-sm);
   --catalog-metadata-heading-size: var(--font-size-md);
 
@@ -267,7 +266,7 @@ export const catalog = css`
   --catalog-card-description-line-height: var(--line-height-base);
   --catalog-card-description-font-weight: var(--font-weight-regular);
   --catalog-card-description-height: 62px;
-  --catalog-card-description-margin-top: 2px;
+  --catalog-card-description-margin-top: 8px;
 
   --catalog-card-content-gap: var(--spacing-xs);
   --catalog-card-content-gap-vertical: var(--spacing-sm);

package/src/core/types/hooks.ts

@@ -17,6 +17,7 @@ import type {
   FilteredCatalog,
   UseCatalogSortResponse,
   UseCatalogSearchResponse,
+  CatalogViewMode,
 } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
@@ -139,7 +140,11 @@ export type ThemeHooks = {
         nextPage?: ResolvedNavItemWithLink;
       }
     | undefined;
-  useCatalog: (config?: CatalogEntityConfig, entitiesCounterInitial?: number) => UseCatalogResponse;
+  useCatalog: (
+    config?: CatalogEntityConfig,
+    entitiesCounterInitial?: number,
+    initialViewMode?: CatalogViewMode,
+  ) => UseCatalogResponse;
   useCatalogSort: () => UseCatalogSortResponse;
   useCatalogSearch: () => UseCatalogSearchResponse;
   useFetchCatalogEntities: (

package/src/icons/HierarchyIcon/HierarchyIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.0625 7.3125H15.1875C15.4858 7.31216 15.7717 7.19352 15.9826 6.98262C16.1935 6.77171 16.3122 6.48576 16.3125 6.1875V2.8125C16.3122 2.51424 16.1935 2.22829 15.9826 2.01738C15.7717 1.80648 15.4858 1.68784 15.1875 1.6875H2.8125C2.51424 1.68784 2.22829 1.80648 2.01738 2.01738C1.80648 2.22829 1.68784 2.51424 1.6875 2.8125V6.1875C1.68784 6.48576 1.80648 6.77171 2.01738 6.98262C2.22829 7.19352 2.51424 7.31216 2.8125 7.3125H3.9375H5.0625ZM15.1875 2.8125H2.8125V6.1875H15.1875V2.8125Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.1875 10.6875H9.5625C9.26424 10.6878 8.97829 10.8065 8.76738 11.0174C8.55648 11.2283 8.43784 11.5142 8.4375 11.8125V12.9375H5.0625V10.4546V9.5625V7.3125H3.9375V10.4546V12.9375C3.93784 13.2358 4.05648 13.5217 4.26738 13.7326C4.47829 13.9435 4.76424 14.0622 5.0625 14.0625H8.4375V15.1875C8.43784 15.4858 8.55648 15.7717 8.76738 15.9826C8.97829 16.1935 9.26424 16.3122 9.5625 16.3125H15.1875C15.4858 16.3122 15.7717 16.1935 15.9826 15.9826C16.1935 15.7717 16.3122 15.4858 16.3125 15.1875V11.8125C16.3122 11.5142 16.1935 11.2283 15.9826 11.0174C15.7717 10.8065 15.4858 10.6878 15.1875 10.6875ZM9.5625 11.8125V15.1875H15.1875V11.8125H9.5625Z"
+    />
+  </svg>
+);
+
+export const HierarchyIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/HierarchyIcon/HierarchyIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;