@redocly/theme 0.56.0-next.4 → 0.56.0-rc.2

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 core_1 = require("../../../core");
-const Tooltip_1 = require("../../../components/Tooltip/Tooltip");
 function CatalogCard({ entity, catalogConfig }) {
     var _a, _b, _c;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
@@ -26,9 +25,8 @@ 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(HeaderIconWrapper, null,
+                    react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type })),
                 react_1.default.createElement(CardTitle, null,
                     react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title))),
             react_1.default.createElement(CardDescription, null,

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

@@ -6,5 +6,7 @@ export type CatalogEntityProps = {
     entitiesCatalogConfig: EntitiesCatalogConfig;
     catalogConfig: CatalogEntityConfig;
     initialRelations: BffCatalogRelatedEntityList;
+    mainCatalogLabelTranslationKey?: string;
+    mainCatalogSlug?: string;
 };
-export declare function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, }: CatalogEntityProps): React.JSX.Element;
+export declare function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, mainCatalogLabelTranslationKey, mainCatalogSlug, }: CatalogEntityProps): React.JSX.Element;

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

@@ -18,9 +18,8 @@ const Menu_1 = require("../../../components/Menu/Menu");
 const Button_1 = require("../../../components/Button/Button");
 const CatalogEntityRelations_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations");
 const hooks_1 = require("../../../core/hooks");
-const SidebarActions_1 = require("../../../components/SidebarActions/SidebarActions");
-const CatalogEntitySchema_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntitySchema");
-function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, }) {
+const SidebarActions_1 = require("../../SidebarActions/SidebarActions");
+function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRelations, mainCatalogLabelTranslationKey, mainCatalogSlug, }) {
     var _a;
     const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -39,6 +38,14 @@ function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRe
                 ] }), footer: react_1.default.createElement(SidebarActions_1.SidebarActions, { layout: layout, collapsedSidebar: collapsedSidebar, isApiDocs: false, onChangeViewClick: onChangeViewClick, onChangeCollapseSidebarClick: onChangeCollapseSidebarClick }) }),
         react_1.default.createElement(CatalogPageContent, null,
             react_1.default.createElement(Breadcrumbs_1.Breadcrumbs, { additionalBreadcrumbs: [
+                    ...(mainCatalogLabelTranslationKey
+                        ? [
+                            {
+                                label: translate(mainCatalogLabelTranslationKey),
+                                link: `catalogs/${mainCatalogSlug}`,
+                            },
+                        ]
+                        : []),
                     { label: linkToMainCatalogLabel, link: linkToMainCatalog },
                     { label: entity.title },
                 ] }),
@@ -46,7 +53,7 @@ function CatalogEntity({ entity, entitiesCatalogConfig, catalogConfig, initialRe
                 react_1.default.createElement(CatalogPageDescription_1.CatalogPageDescription, { title: entity.title, description: (_a = entity.summary) !== null && _a !== void 0 ? _a : '', tag: entity.key }),
                 react_1.default.createElement(CatalogEntityProperties_1.CatalogEntityProperties, { entity: entity }),
                 react_1.default.createElement(CatalogTwoColumnsSection, null,
-                    entity.type === 'data-schema' ? (react_1.default.createElement(CatalogEntitySchema_1.CatalogEntitySchema, { entity: entity })) : (react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity })),
+                    react_1.default.createElement(CatalogEntityMetadata_1.CatalogEntityMetadata, { entity: entity }),
                     react_1.default.createElement(CatalogEntityLinks_1.CatalogEntityLinks, { entity: entity })),
                 react_1.default.createElement(CatalogEntityRelations_1.CatalogEntityRelations, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, initialRelations: initialRelations })))));
 }

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

@@ -14,18 +14,12 @@ const UserEmailProperty_1 = require("../../../../components/Catalog/CatalogEntit
 const DomainsProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty");
 const OwnersProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty");
 const ContactProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty");
-const FormatProperty_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty");
 const propertyRenderers = [
     {
         key: 'type',
         condition: (entity) => !!entity.type,
         component: EntityTypeProperty_1.EntityTypeProperty,
     },
-    {
-        key: 'format',
-        condition: (entity) => { var _a; return entity.type === 'data-schema' && !!((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.specType); },
-        component: FormatProperty_1.FormatProperty,
-    },
     {
         key: 'contact',
         condition: (entity) => { var _a, _b; return !!((_b = (_a = entity.contact) === null || _a === void 0 ? void 0 : _a.slack) === null || _b === void 0 ? void 0 : _b.channels); },
@@ -38,7 +32,7 @@ const propertyRenderers = [
     },
     {
         key: 'tags',
-        condition: (entity) => { var _a; return !!((_a = entity.tags) === null || _a === void 0 ? void 0 : _a.length); },
+        condition: (entity) => !!entity.tags,
         component: TagsProperty_1.TagsProperty,
     },
     {

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

@@ -37,7 +37,6 @@ const CardHeader = styled_components_1.default.div `
   display: flex;
   align-items: center;
   gap: var(--catalog-card-content-gap);
-  font-weight: var(--font-weight-medium);
 `;
 const CardContent = styled_components_1.default.div `
   flex: 1;
@@ -45,8 +44,5 @@ const CardContent = styled_components_1.default.div `
   align-items: center;
   gap: var(--catalog-card-content-gap);
   flex-wrap: wrap;
-  color: var(--text-color-primary);
-  font-size: var(--font-size-lg);
-  line-height: var(--line-height-lg);
 `;
 //# sourceMappingURL=CatalogEntityPropertyCard.js.map

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

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DomainsProperty = DomainsProperty;
 const react_1 = __importDefault(require("react"));
 const GraphIcon_1 = require("../../../../icons/GraphIcon/GraphIcon");
-const Tag_1 = require("../../../../components/Tag/Tag");
-const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+const theme_1 = require("../../../../index.js");
+const CatalogEntityPropertyCard_1 = require("./CatalogEntityPropertyCard");
 function DomainsProperty({ entity }) {
     const { domains = [] } = entity;
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(GraphIcon_1.GraphIcon, null),
-                "Domains"), content: react_1.default.createElement(react_1.default.Fragment, null, domains === null || domains === void 0 ? void 0 : domains.map((domain) => (react_1.default.createElement(Tag_1.Tag, { key: domain === null || domain === void 0 ? void 0 : domain.id, style: { backgroundColor: 'var(--bg-color)' } },
+                "Domains"), content: react_1.default.createElement(react_1.default.Fragment, null, domains === null || domains === void 0 ? void 0 : domains.map((domain) => (react_1.default.createElement(theme_1.Tag, { key: domain === null || domain === void 0 ? void 0 : domain.id, style: { backgroundColor: 'var(--bg-color)' } },
                 react_1.default.createElement(GraphIcon_1.GraphIcon, null), domain === null || domain === void 0 ? void 0 :
                 domain.title)))) })));
 }

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

@@ -8,18 +8,13 @@ const react_1 = __importDefault(require("react"));
 const EntityTypeIcon_1 = require("../../../../icons/EntityTypeIcon/EntityTypeIcon");
 const utils_1 = require("../../../../core/utils");
 const CatalogEntityTypeIcon_1 = require("../../../../components/Catalog/CatalogEntityTypeIcon");
-const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
-const formatEntityType = (entityType) => {
-    return (0, utils_1.capitalize)(entityType.startsWith('api-')
-        ? entityType.replace('api-', 'API-').replace(/-/g, ' ')
-        : entityType.replace(/-/g, ' '));
-};
+const CatalogEntityPropertyCard_1 = require("./CatalogEntityPropertyCard");
 function EntityTypeProperty({ entity }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null),
                 "Entity type"), content: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type }),
-                formatEntityType(entity.type)) })));
+                react_1.default.createElement("strong", null, (0, utils_1.capitalize)(entity.type))) })));
 }
 //# sourceMappingURL=EntityTypeProperty.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations.js

@@ -5,9 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityDefaultRelations = CatalogEntityDefaultRelations;
 const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogTableView_1 = require("../../../../components/Catalog/CatalogTableView/CatalogTableView");
 const CatalogEntityCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogEntityCell");
+const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityRelationsTable_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable");
-const CatalogEntityTypeTag_1 = require("../../../../components/Catalog/CatalogEntityTypeTag");
 const CatalogEntityRelationCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogEntityRelationCell");
 const columns = [
     {
@@ -21,7 +23,7 @@ const columns = [
     {
         key: 'type',
         title: 'Type',
-        render: (entity) => react_1.default.createElement(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: entity.type }),
+        render: (entity) => (react_1.default.createElement(EntityTypeTag, { color: (0, CatalogTableView_1.getEntityTagColor)(entity.type) }, entity.type)),
         sortable: true,
         sortKey: 'type',
         width: '1fr',
@@ -37,4 +39,8 @@ function CatalogEntityDefaultRelations({ entity, relations, query, searchQuery,
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations" },
         react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, heading: "Related entities", columns: columns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })));
 }
+const EntityTypeTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  font-size: var(--font-size-base);
+  background-color: transparent;
+`;
 //# sourceMappingURL=CatalogEntityDefaultRelations.js.map

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

@@ -1,6 +1,5 @@
 import { JSX } from 'react';
 export type CatalogEntityIconProps = {
     entityType: string;
-    defaultColor?: boolean;
 };
-export declare function CatalogEntityIcon({ entityType, defaultColor, }: CatalogEntityIconProps): JSX.Element;
+export declare function CatalogEntityIcon({ entityType }: CatalogEntityIconProps): JSX.Element;

package/lib/components/Catalog/CatalogEntityIcon.js

@@ -9,29 +9,36 @@ 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 getIconColor = (entityType) => `var(--catalog-entity-icon-color-${entityType})`;
-const getEntityIcon = ({ entityType, defaultColor }) => {
-    const iconColor = defaultColor
-        ? `var(--catalog-entity-icon-color)`
-        : getIconColor(entityType);
-    const entityIconMap = {
-        service: react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
-        domain: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor }),
-        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(CodeIcon_1.CodeIcon, { color: iconColor }),
-        'data-schema': react_1.default.createElement(NetworkIcon_1.NetworkIcon, { color: iconColor }),
-        'api-operation': react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, { color: iconColor }),
-    };
-    return entityIconMap[entityType];
+const iconColor = 'var(--catalog-entity-icon-color)';
+const entityIconMap = {
+    service: react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
+    domain: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor }),
+    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(CodeIcon_1.CodeIcon, { color: iconColor }),
+    'data-schema': react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
+    'api-operation': react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
 };
-function CatalogEntityIcon({ entityType, defaultColor = false, }) {
-    const icon = getEntityIcon({ entityType, defaultColor });
-    if (!icon) {
-        throw new Error(`Unhandled entity type: ${entityType}`);
+function CatalogEntityIcon({ entityType }) {
+    const key = entityType.toLowerCase();
+    switch (key) {
+        case 'service':
+            return entityIconMap.service;
+        case 'domain':
+            return entityIconMap.domain;
+        case 'team':
+            return entityIconMap.team;
+        case 'user':
+            return entityIconMap.user;
+        case 'api-description':
+            return entityIconMap['api-description'];
+        case 'data-schema':
+            return entityIconMap.service;
+        case 'api-operation':
+            return entityIconMap.service;
+        default:
+            const exhaustiveCheck = key;
+            throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
     }
-    return icon;
 }
 //# sourceMappingURL=CatalogEntityIcon.js.map

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

@@ -1,6 +1,5 @@
 import React from 'react';
 export type CatalogEntityTypeIconProps = {
     entityType: string;
-    defaultColor?: boolean;
 };
-export declare function CatalogEntityTypeIcon({ entityType, defaultColor, }: CatalogEntityTypeIconProps): React.JSX.Element;
+export declare function CatalogEntityTypeIcon({ entityType }: CatalogEntityTypeIconProps): React.JSX.Element;

package/lib/components/Catalog/CatalogEntityTypeIcon.js

@@ -6,10 +6,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityTypeIcon = CatalogEntityTypeIcon;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const CatalogEntityIcon_1 = require("../../components/Catalog/CatalogEntityIcon");
-function CatalogEntityTypeIcon({ entityType, defaultColor = false, }) {
-    return (react_1.default.createElement(IconContainer, { "data-component-name": "Catalog/CatalogEntityTypeIcon", entityType: entityType, defaultColor: defaultColor },
-        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, defaultColor: defaultColor })));
+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 getEntityIcon = (entityType) => {
+    const iconColor = 'var(--catalog-entity-icon-color)';
+    switch (entityType.toLowerCase()) {
+        case 'service':
+            return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor });
+        case 'domain':
+            return react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor });
+        case 'team':
+            return react_1.default.createElement(PeopleIcon_1.PeopleIcon, { color: iconColor });
+        case 'user':
+            return react_1.default.createElement(UserIcon_1.UserIcon, { color: iconColor });
+        default:
+            return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor });
+    }
+};
+function CatalogEntityTypeIcon({ entityType }) {
+    return (react_1.default.createElement(IconContainer, { "data-component-name": "Catalog/CatalogEntityTypeIcon" }, getEntityIcon(entityType)));
 }
 const IconContainer = styled_components_1.default.div `
   display: flex;
@@ -18,13 +35,8 @@ const IconContainer = styled_components_1.default.div `
   width: var(--catalog-table-icon-width);
   height: var(--catalog-table-icon-height);
   border-radius: var(--catalog-table-icon-border-radius);
-  background-color: ${({ defaultColor, entityType }) => defaultColor
-    ? 'var(--catalog-entity-bg-color)'
-    : `var(--catalog-entity-bg-color-${entityType})`};
+  background-color: var(--catalog-table-icon-bg-color);
   flex-shrink: 0;
-  border: 1px solid
-    ${({ defaultColor, entityType }) => defaultColor
-    ? 'var(--catalog-entity-border-color)'
-    : `var(--catalog-entity-border-color-${entityType})`};
+  border: var(--catalog-table-icon-border-width) solid var(--catalog-table-icon-border-color);
 `;
 //# sourceMappingURL=CatalogEntityTypeIcon.js.map

package/lib/components/Catalog/CatalogPageDescription.js

@@ -8,12 +8,12 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const H3_1 = require("../../components/Typography/H3");
-const Tag_1 = require("../../components/Tag/Tag");
+const CounterTag_1 = require("../Tags/CounterTag");
 function CatalogPageDescription({ title, titleTranslationKey, description, descriptionTranslationKey, tag, }) {
     return (react_1.default.createElement(CatalogPageDescriptionWrapper, null,
         react_1.default.createElement(CatalogTitleWrapper, null,
             react_1.default.createElement(CatalogTitle, { "data-translation-key": titleTranslationKey }, title),
-            react_1.default.createElement(Tag_1.Tag, { borderless: true, textTransform: "none" }, tag)),
+            react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, tag)),
         react_1.default.createElement(CatalogDescription, { "data-translation-key": descriptionTranslationKey }, description)));
 }
 const CatalogPageDescriptionWrapper = styled_components_1.default.div `

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

@@ -7,10 +7,11 @@ exports.CatalogEntityCell = CatalogEntityCell;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight");
-const CatalogEntityTypeIcon_1 = require("../../../components/Catalog/CatalogEntityTypeIcon");
+const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
 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(IconContainer, null,
+            react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type })),
         react_1.default.createElement(EntityTitleContent, null,
             react_1.default.createElement(EntityTitle, null,
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title)),
@@ -23,6 +24,17 @@ const EntityTitleCellWrapper = styled_components_1.default.div `
   gap: var(--catalog-table-title-cell-gap);
   max-width: 100%;
 `;
+const IconContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--catalog-table-icon-width);
+  height: var(--catalog-table-icon-height);
+  border-radius: var(--catalog-table-icon-border-radius);
+  background-color: var(--catalog-table-icon-bg-color);
+  flex-shrink: 0;
+  border: var(--catalog-table-icon-border-width) solid var(--catalog-table-icon-border-color);
+`;
 const EntityTitleContent = styled_components_1.default.div `
   display: flex;
   flex-direction: column;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SortOption } from '../../../core/types';
-import { BaseEntity, CatalogColumn } from '../../../components/Catalog/CatalogTableView/CatalogTableView';
+import { BaseEntity, CatalogColumn } from './CatalogTableView';
 export type CatalogTableHeaderCellProps<T extends BaseEntity> = {
     column: CatalogColumn<T>;
     setSortOption: (sortOption: SortOption | null) => void;

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

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import { SortOption } from '../../../core/types';
+import { EntityType, SortOption } from '../../../core/types';
 export type BaseEntity = {
     id: string;
     key: string;
@@ -27,4 +27,5 @@ export type CatalogColumn<T> = {
     sortable?: boolean;
     sortKey?: string;
 };
+export declare const getEntityTagColor: (type: EntityType) => string;
 export declare const CatalogTableView: <T extends BaseEntity>({ entities, entitiesCatalogConfig, catalogConfig, columns, setSortOption, currentSortOption, handleSortClick, isColumnSorted, }: CatalogTableViewProps<T>) => React.JSX.Element;

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

@@ -3,16 +3,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogTableView = void 0;
+exports.CatalogTableView = exports.getEntityTagColor = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const Tag_1 = require("../../../components/Tag/Tag");
 const CatalogOwnersCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogOwnersCell");
 const CatalogDomainsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogDomainsCell");
 const CatalogEntityCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogEntityCell");
 const CatalogTableHeaderCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTableHeaderCell");
 const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
 const CatalogTableViewRow_1 = require("../../../components/Catalog/CatalogTableView/CatalogTableViewRow");
-const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
+const getEntityTagColor = (type) => {
+    switch (type) {
+        case 'service':
+            return 'blue';
+        case 'domain':
+            return 'grass';
+        case 'team':
+            return 'purple';
+        case 'user':
+            return 'yellow';
+        case 'api-description':
+            return 'sky';
+        case 'data-schema':
+            return 'sky';
+        case 'api-operation':
+            return 'sky';
+        default:
+            const exhaustiveCheck = type;
+            throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
+    }
+};
+exports.getEntityTagColor = getEntityTagColor;
 const baseColumns = [
     {
         key: 'entity',
@@ -26,7 +48,7 @@ const baseColumns = [
     {
         key: 'type',
         title: 'Type',
-        render: (entity) => react_1.default.createElement(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: entity.type }),
+        render: (entity) => (react_1.default.createElement(EntityTypeTag, { color: (0, exports.getEntityTagColor)(entity.type) }, entity.type)),
         width: '2fr',
         minWidth: '120px',
         sortable: true,
@@ -66,6 +88,11 @@ const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, colu
         react_1.default.createElement("div", null, entities.map((entity) => (react_1.default.createElement(CatalogTableViewRow_1.CatalogTableViewRow, { key: entity.id, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns }))))));
 };
 exports.CatalogTableView = CatalogTableView;
+const EntityTypeTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  font-size: var(--font-size-base);
+  background-color: transparent;
+  text-transform: lowercase;
+`;
 const CatalogTableWrapper = styled_components_1.default.div `
   width: 100%;
   border-bottom: 1px solid var(--catalog-table-border-color);

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

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import { EntityType } from '../../../core/types';
 export type BaseEntity = {
     id: string;
     key: string;
@@ -22,4 +23,5 @@ export type CatalogColumn<T> = {
     sortable?: boolean;
     sortKey?: string;
 };
+export declare const getEntityTagColor: (type: EntityType) => string;
 export declare const CatalogTableViewRow: <T extends BaseEntity>({ entity, entitiesCatalogConfig, catalogConfig, columns, }: CatalogTableViewRowProps<T>) => React.JSX.Element;

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

@@ -3,15 +3,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogTableViewRow = void 0;
+exports.CatalogTableViewRow = exports.getEntityTagColor = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const Tag_1 = require("../../../components/Tag/Tag");
 const CatalogOwnersCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogOwnersCell");
 const CatalogDomainsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogDomainsCell");
 const CatalogEntityCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogEntityCell");
 const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
 const useCatalogTableViewRow_1 = require("../../../core/hooks/catalog/useCatalogTableViewRow");
-const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
+const getEntityTagColor = (type) => {
+    switch (type) {
+        case 'service':
+            return 'blue';
+        case 'domain':
+            return 'grass';
+        case 'team':
+            return 'purple';
+        case 'user':
+            return 'yellow';
+        case 'api-description':
+            return 'sky';
+        case 'data-schema':
+            return 'sky';
+        case 'api-operation':
+            return 'sky';
+        default:
+            const exhaustiveCheck = type;
+            throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
+    }
+};
+exports.getEntityTagColor = getEntityTagColor;
 const baseColumns = [
     {
         key: 'entity',
@@ -25,7 +47,7 @@ const baseColumns = [
     {
         key: 'type',
         title: 'Type',
-        render: (entity) => react_1.default.createElement(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: entity.type }),
+        render: (entity) => (react_1.default.createElement(EntityTypeTag, { color: (0, exports.getEntityTagColor)(entity.type) }, entity.type)),
         width: '2fr',
         minWidth: '120px',
         sortable: true,
@@ -72,6 +94,11 @@ const CatalogTableViewRow = ({ entity, entitiesCatalogConfig, catalogConfig, col
     return (react_1.default.createElement(TableRow, { key: entity.id, columnsWidths: columns.map((column) => column.width || '1fr'), columnsMinWidths: columns.map((column) => column.minWidth || 'auto'), onClick: () => handleRowClick() }, columns.map((column) => (react_1.default.createElement(TableCell, { key: column.key, className: column.key === 'entity' ? '' : 'tooltip-cell-container' }, column.render(entity))))));
 };
 exports.CatalogTableViewRow = CatalogTableViewRow;
+const EntityTypeTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  font-size: var(--font-size-base);
+  background-color: transparent;
+  text-transform: lowercase;
+`;
 const TableRow = styled_components_1.default.div `
   display: grid;
   grid-template-columns: ${({ columnsWidths, columnsMinWidths }) => columnsWidths
@@ -100,7 +127,5 @@ const TableCell = styled_components_1.default.div `
   &.tooltip-cell-container {
     overflow: visible;
   }
-
-  height: 52px;
 `;
 //# sourceMappingURL=CatalogTableViewRow.js.map

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

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { TagProps } from '../../components/Tag/Tag';
+import { TagProps } from '../Tag/Tag';
 export type CatalogTagsWithTooltipProps = {
     items: string[];
     itemsToShow?: number;

package/lib/components/Catalog/CatalogTagsWithTooltip.js

@@ -7,9 +7,9 @@ exports.CatalogTagsWithTooltip = CatalogTagsWithTooltip;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const constants_1 = require("../../core/constants");
-const Tag_1 = require("../../components/Tag/Tag");
-const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
+const Tag_1 = require("../Tag/Tag");
+const CatalogHighlight_1 = require("./CatalogHighlight");
+const Tooltip_1 = require("../Tooltip/Tooltip");
 function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true, tagProps, }) {
     if (!items || items.length === 0) {
         if (showPlaceholder) {

package/lib/components/Catalog/variables.js

@@ -101,36 +101,6 @@ exports.catalog = (0, styled_components_1.css) `
     * @tokens Catalog entity icon
     */
   --catalog-entity-icon-color: var(--color-primary-base);
-  --catalog-entity-border-color: var(--border-color-secondary);
-  --catalog-entity-bg-color: var(--bg-color-tonal);
-
-  --catalog-entity-icon-color-service: var(--color-blue-6);
-  --catalog-entity-border-color-service: var(--color-blueberry-3);
-  --catalog-entity-bg-color-service: var(--color-blue-1);
-
-  --catalog-entity-icon-color-domain: var(--color-grass-8);
-  --catalog-entity-border-color-domain: var(--color-grass-4);
-  --catalog-entity-bg-color-domain: var(--color-grass-1);
-
-  --catalog-entity-icon-color-team: var(--color-purple-7);
-  --catalog-entity-border-color-team: var(--color-purple-4);
-  --catalog-entity-bg-color-team: var(--color-purple-1);
-
-  --catalog-entity-icon-color-user: var(--color-orange-7);
-  --catalog-entity-border-color-user: var(--color-orange-4);
-  --catalog-entity-bg-color-user: var(--color-orange-1);
-
-  --catalog-entity-icon-color-api-description: var(--color-sky-8);
-  --catalog-entity-border-color-api-description: var(--color-sky-5);
-  --catalog-entity-bg-color-api-description: var(--color-sky-1);
-
-  --catalog-entity-icon-color-data-schema: var(--color-carrot-8);
-  --catalog-entity-border-color-data-schema: var(--color-carrot-6);
-  --catalog-entity-bg-color-data-schema: var(--color-carrot-1);
-
-  --catalog-entity-icon-color-api-operation: var(--color-raspberry-7);
-  --catalog-entity-border-color-api-operation: var(--color-raspberry-3);
-  --catalog-entity-bg-color-api-operation: var(--color-raspberry-1);
 
   /**
     * @tokens Catalog tags
@@ -287,8 +257,8 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-table-border-color: var(--border-color-primary);
   --catalog-table-header-bg-color: var(--bg-color-secondary);
   --catalog-table-header-font-weight: var(--font-weight-medium);
-  --catalog-table-header-cell-padding: 4px 8px;
-  --catalog-table-cell-padding: 4px 8px;
+  --catalog-table-header-cell-padding: 5px 8px;
+  --catalog-table-cell-padding: 5px 8px;
   --catalog-table-row-hover-bg-color: var(--bg-color-hover, rgba(0, 0, 0, 0.04));
   --catalog-table-empty-state-padding: 32px;
   --catalog-table-empty-state-color: var(--text-color-secondary);
@@ -306,8 +276,8 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog table icon
     */
-  --catalog-table-icon-width: 32px;
-  --catalog-table-icon-height: 32px;
+  --catalog-table-icon-width: 30px;
+  --catalog-table-icon-height: 30px;
   --catalog-table-icon-border-radius: 4px;
   --catalog-table-icon-bg-color: var(--bg-color-tonal);
   --catalog-table-icon-border-color: var(--border-color-secondary);
@@ -377,6 +347,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-empty-state-font-size: var(--font-size-base);
   --catalog-empty-state-line-height: var(--line-height-base);
 
+
   --catalog-avatar-bg-color: #ededf2;
   // @tokens End
 `;