@redocly/theme 0.56.0-next.3 → 0.56.0-next.4

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

@@ -0,0 +1,36 @@
+import React, { JSX } from 'react';
+
+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';
+
+export type FormatPropertyProps = {
+  entity: BffCatalogEntity;
+};
+
+export function FormatProperty({ entity }: FormatPropertyProps): JSX.Element {
+  return (
+    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty">
+      <CatalogEntityPropertyCard
+        header={
+          <>
+            <NotesIcon />
+            Format
+          </>
+        }
+        content={
+          <>
+            <Tag
+              textTransform="none"
+              key={entity.metadata?.specType}
+              style={{ backgroundColor: 'var(--bg-color)' }}
+            >
+              {entity.metadata?.specType}
+            </Tag>
+          </>
+        }
+      />
+    </div>
+  );
+}

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

@@ -1,20 +1,11 @@
 import React, { JSX } from 'react';
-import styled from 'styled-components';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
-import {
-  BffCatalogEntity,
-  BffCatalogRelatedEntity,
-  EntityType,
-  SortOption,
-} from '@redocly/theme/core/types';
-import {
-  CatalogColumn,
-  getEntityTagColor,
-} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '@redocly/theme/core/types';
+import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
+import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 import { CatalogEntityRelationCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityRelationCell';
 
 const columns: CatalogColumn<BffCatalogRelatedEntity>[] = [
@@ -29,11 +20,7 @@ const columns: CatalogColumn<BffCatalogRelatedEntity>[] = [
   {
     key: 'type',
     title: 'Type',
-    render: (entity) => (
-      <EntityTypeTag color={getEntityTagColor(entity.type as EntityType)}>
-        {entity.type}
-      </EntityTypeTag>
-    ),
+    render: (entity) => <CatalogEntityTypeTag entityType={entity.type} />,
     sortable: true,
     sortKey: 'type',
     width: '1fr',
@@ -105,8 +92,3 @@ export function CatalogEntityDefaultRelations({
     </div>
   );
 }
-
-const EntityTypeTag = styled(Tag)`
-  font-size: var(--font-size-base);
-  background-color: transparent;
-`;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
+
+export type CatalogEntitySchemaProps = {
+  entity: BffCatalogEntity;
+};
+
+export function CatalogEntitySchema({ entity }: CatalogEntitySchemaProps) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { schema, ...metadataToShow } = entity.metadata || {};
+  const metadata = Object.entries(metadataToShow);
+
+  if (!metadata.length) {
+    return null;
+  }
+
+  let parsedSchema;
+
+  try {
+    parsedSchema = JSON.parse(schema);
+  } catch (error) {
+    return null;
+  }
+
+  return (
+    <MetadataWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMetadata">
+      <Heading>{translate('catalog.entity.metadata.title')}</Heading>
+      <JsonViewer data={parsedSchema} expandLevel={3} title="JSON" />
+    </MetadataWrapper>
+  );
+}
+
+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;
+  margin: var(--spacing-lg) 0;
+`;
+
+const Heading = styled.h2`
+  margin-bottom: var(--spacing-base);
+  margin-top: 0;
+  font-size: var(--catalog-metadata-heading-size);
+`;

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -5,43 +5,43 @@ 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';
-
-const iconColor = 'var(--catalog-entity-icon-color)';
-
-const entityIconMap: Record<EntityType, JSX.Element> = {
-  service: <CodeIcon color={iconColor} />,
-  domain: <GraphIcon color={iconColor} />,
-  team: <PeopleIcon color={iconColor} />,
-  user: <UserIcon color={iconColor} />,
-  'api-description': <CodeIcon color={iconColor} />,
-  'data-schema': <CodeIcon color={iconColor} />,
-  'api-operation': <CodeIcon color={iconColor} />,
-};
+import { NetworkIcon } from '@redocly/theme/icons/NetworkIcon/NetworkIcon';
+import { MoleculesIcon } from '@redocly/theme/icons/MoleculesIcon/MoleculesIcon';
 
 export type CatalogEntityIconProps = {
   entityType: string;
+  defaultColor?: boolean;
+};
+
+const getIconColor = (entityType: EntityType) => `var(--catalog-entity-icon-color-${entityType})`;
+
+const getEntityIcon = ({ entityType, defaultColor }: CatalogEntityIconProps) => {
+  const iconColor = defaultColor
+    ? `var(--catalog-entity-icon-color)`
+    : getIconColor(entityType as EntityType);
+
+  const entityIconMap: Record<EntityType, JSX.Element> = {
+    service: <CodeIcon color={iconColor} />,
+    domain: <GraphIcon color={iconColor} />,
+    team: <PeopleIcon color={iconColor} />,
+    user: <UserIcon color={iconColor} />,
+    'api-description': <CodeIcon color={iconColor} />,
+    'data-schema': <NetworkIcon color={iconColor} />,
+    'api-operation': <MoleculesIcon color={iconColor} />,
+  };
+
+  return entityIconMap[entityType as EntityType];
 };
 
-export function CatalogEntityIcon({ entityType }: CatalogEntityIconProps): JSX.Element {
-  const key = entityType.toLowerCase() as EntityType;
-
-  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: never = key;
-      throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
+export function CatalogEntityIcon({
+  entityType,
+  defaultColor = false,
+}: CatalogEntityIconProps): JSX.Element {
+  const icon = getEntityIcon({ entityType, defaultColor });
+
+  if (!icon) {
+    throw new Error(`Unhandled entity type: ${entityType}`);
   }
+
+  return icon;
 }

package/src/components/Catalog/CatalogEntityTypeIcon.tsx

@@ -1,48 +1,43 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
-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';
-
-const getEntityIcon = (entityType: string): ReactNode => {
-  const iconColor = 'var(--catalog-entity-icon-color)';
-
-  switch (entityType.toLowerCase()) {
-    case 'service':
-      return <CodeIcon color={iconColor} />;
-    case 'domain':
-      return <GraphIcon color={iconColor} />;
-    case 'team':
-      return <PeopleIcon color={iconColor} />;
-    case 'user':
-      return <UserIcon color={iconColor} />;
-    default:
-      return <CodeIcon color={iconColor} />;
-  }
-};
+import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
 
 export type CatalogEntityTypeIconProps = {
   entityType: string;
+  defaultColor?: boolean;
 };
 
-export function CatalogEntityTypeIcon({ entityType }: CatalogEntityTypeIconProps) {
+export function CatalogEntityTypeIcon({
+  entityType,
+  defaultColor = false,
+}: CatalogEntityTypeIconProps) {
   return (
-    <IconContainer data-component-name="Catalog/CatalogEntityTypeIcon">
-      {getEntityIcon(entityType)}
+    <IconContainer
+      data-component-name="Catalog/CatalogEntityTypeIcon"
+      entityType={entityType}
+      defaultColor={defaultColor}
+    >
+      <CatalogEntityIcon entityType={entityType} defaultColor={defaultColor} />
     </IconContainer>
   );
 }
 
-const IconContainer = styled.div`
+const IconContainer = styled.div<{ entityType: string; defaultColor: boolean }>`
   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);
+  background-color: ${({ defaultColor, entityType }) =>
+    defaultColor
+      ? 'var(--catalog-entity-bg-color)'
+      : `var(--catalog-entity-bg-color-${entityType})`};
   flex-shrink: 0;
-  border: var(--catalog-table-icon-border-width) solid var(--catalog-table-icon-border-color);
+  border: 1px solid
+    ${({ defaultColor, entityType }) =>
+      defaultColor
+        ? 'var(--catalog-entity-border-color)'
+        : `var(--catalog-entity-border-color-${entityType})`};
 `;

package/src/components/Catalog/CatalogEntityTypeTag.tsx

@@ -0,0 +1,43 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { EntityType } from '@redocly/theme/core/types';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+
+export type CatalogEntityTypeTagProps = {
+  entityType: string;
+};
+
+const entityTagColorMap: Record<EntityType, string> = {
+  service: 'blue',
+  domain: 'grass',
+  team: 'purple',
+  user: 'yellow',
+  'api-description': 'sky',
+  'data-schema': 'carrot',
+  'api-operation': 'raspberry',
+};
+
+export const getEntityTagColor = (type: EntityType): string => {
+  const color = entityTagColorMap[type];
+
+  if (!color) {
+    throw new Error(`Unhandled entity type: ${type}`);
+  }
+
+  return color;
+};
+
+export function CatalogEntityTypeTag({ entityType }: CatalogEntityTypeTagProps): JSX.Element {
+  return (
+    <EntityTypeTagWrapper color={getEntityTagColor(entityType as EntityType)}>
+      {entityType}
+    </EntityTypeTagWrapper>
+  );
+}
+
+const EntityTypeTagWrapper = styled(Tag)`
+  font-size: var(--font-size-base);
+  background-color: transparent;
+  text-transform: lowercase;
+`;

package/src/components/Catalog/CatalogPageDescription.tsx

@@ -3,8 +3,7 @@ import styled from 'styled-components';
 
 import { breakpoints } from '@redocly/theme/core/utils';
 import { H3 } from '@redocly/theme/components/Typography/H3';
-
-import { CounterTag } from '../Tags/CounterTag';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
 
 export type CatalogPageDescriptionProps = {
   title: string;
@@ -25,7 +24,9 @@ export function CatalogPageDescription({
     <CatalogPageDescriptionWrapper>
       <CatalogTitleWrapper>
         <CatalogTitle data-translation-key={titleTranslationKey}>{title}</CatalogTitle>
-        <CounterTag borderless>{tag}</CounterTag>
+        <Tag borderless textTransform="none">
+          {tag}
+        </Tag>
       </CatalogTitleWrapper>
       <CatalogDescription data-translation-key={descriptionTranslationKey}>
         {description}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
-import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
+import { CatalogEntityTypeIcon } from '@redocly/theme/components/Catalog/CatalogEntityTypeIcon';
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 
 type Entity = Pick<BffCatalogEntity, 'type' | 'title' | 'summary'>;
@@ -13,9 +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">
-      <IconContainer>
-        <CatalogEntityIcon entityType={entity.type} />
-      </IconContainer>
+      <CatalogEntityTypeIcon entityType={entity.type} defaultColor={true} />
       <EntityTitleContent>
         <EntityTitle>
           <CatalogHighlight>{entity.title}</CatalogHighlight>
@@ -37,18 +35,6 @@ const EntityTitleCellWrapper = styled.div`
   max-width: 100%;
 `;
 
-const IconContainer = styled.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.div`
   display: flex;
   flex-direction: column;

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

@@ -5,8 +5,10 @@ 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 { BaseEntity, CatalogColumn } from './CatalogTableView';
+import {
+  BaseEntity,
+  CatalogColumn,
+} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 
 export type CatalogTableHeaderCellProps<T extends BaseEntity> = {
   column: CatalogColumn<T>;

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

@@ -2,14 +2,14 @@ import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
-import { EntityType, SortOption, BffCatalogEntity } from '@redocly/theme/core/types';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { SortOption, BffCatalogEntity } from '@redocly/theme/core/types';
 import { CatalogOwnersCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogOwnersCell';
 import { CatalogDomainsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogDomainsCell';
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
 import { CatalogTableHeaderCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableHeaderCell';
 import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTagsCell';
 import { CatalogTableViewRow } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableViewRow';
+import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 
 export type BaseEntity = {
   id: string;
@@ -40,28 +40,6 @@ export type CatalogColumn<T> = {
   sortKey?: string;
 };
 
-export const getEntityTagColor = (type: EntityType): string => {
-  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: never = type;
-      throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
-  }
-};
-
 const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
   {
     key: 'entity',
@@ -75,11 +53,7 @@ const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
   {
     key: 'type',
     title: 'Type',
-    render: (entity) => (
-      <EntityTypeTag color={getEntityTagColor(entity.type as EntityType)}>
-        {entity.type}
-      </EntityTypeTag>
-    ),
+    render: (entity) => <CatalogEntityTypeTag entityType={entity.type} />,
     width: '2fr',
     minWidth: '120px',
     sortable: true,
@@ -154,12 +128,6 @@ export const CatalogTableView = <T extends BaseEntity>({
   );
 };
 
-const EntityTypeTag = styled(Tag)`
-  font-size: var(--font-size-base);
-  background-color: transparent;
-  text-transform: lowercase;
-`;
-
 const CatalogTableWrapper = styled.div`
   width: 100%;
   border-bottom: 1px solid var(--catalog-table-border-color);

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

@@ -2,13 +2,13 @@ import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 
-import { EntityType, BffCatalogEntity } from '@redocly/theme/core/types';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { CatalogOwnersCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogOwnersCell';
 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 { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 
 export type BaseEntity = {
   id: string;
@@ -35,28 +35,6 @@ export type CatalogColumn<T> = {
   sortKey?: string;
 };
 
-export const getEntityTagColor = (type: EntityType): string => {
-  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: never = type;
-      throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
-  }
-};
-
 const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
   {
     key: 'entity',
@@ -70,11 +48,7 @@ const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
   {
     key: 'type',
     title: 'Type',
-    render: (entity) => (
-      <EntityTypeTag color={getEntityTagColor(entity.type as EntityType)}>
-        {entity.type}
-      </EntityTypeTag>
-    ),
+    render: (entity) => <CatalogEntityTypeTag entityType={entity.type} />,
     width: '2fr',
     minWidth: '120px',
     sortable: true,
@@ -143,12 +117,6 @@ export const CatalogTableViewRow = <T extends BaseEntity>({
   );
 };
 
-const EntityTypeTag = styled(Tag)`
-  font-size: var(--font-size-base);
-  background-color: transparent;
-  text-transform: lowercase;
-`;
-
 const TableRow = styled.div<{ columnsWidths: string[]; columnsMinWidths: string[] }>`
   display: grid;
   grid-template-columns: ${({ columnsWidths, columnsMinWidths }) =>
@@ -181,4 +149,6 @@ const TableCell = styled.div`
   &.tooltip-cell-container {
     overflow: visible;
   }
+
+  height: 52px;
 `;

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -2,10 +2,9 @@ import React, { JSX } from 'react';
 import styled from 'styled-components';
 
 import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
-
-import { Tag, TagProps } from '../Tag/Tag';
-import { CatalogHighlight } from './CatalogHighlight';
-import { TooltipComponent } from '../Tooltip/Tooltip';
+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';
 
 export type CatalogTagsWithTooltipProps = {
   items: string[];

package/src/components/Catalog/variables.ts

@@ -99,6 +99,36 @@ export const catalog = 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
@@ -255,8 +285,8 @@ export const catalog = 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: 5px 8px;
-  --catalog-table-cell-padding: 5px 8px;
+  --catalog-table-header-cell-padding: 4px 8px;
+  --catalog-table-cell-padding: 4px 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);
@@ -274,8 +304,8 @@ export const catalog = css`
   /**
     * @tokens Catalog table icon
     */
-  --catalog-table-icon-width: 30px;
-  --catalog-table-icon-height: 30px;
+  --catalog-table-icon-width: 32px;
+  --catalog-table-icon-height: 32px;
   --catalog-table-icon-border-radius: 4px;
   --catalog-table-icon-bg-color: var(--bg-color-tonal);
   --catalog-table-icon-border-color: var(--border-color-secondary);
@@ -345,7 +375,6 @@ export const catalog = 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
 `;

package/src/components/Menu/variables.ts

@@ -128,7 +128,9 @@ export const mobileMenu = css`
   /**
     * @tokens Mobile Menu
     * */
+  /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
   --menu-mobile-height: calc(100vh - var(--navbar-height));
+  --menu-mobile-height: calc(100dvh - var(--navbar-height));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;