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

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,37 +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} />,
-};
+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'];
-    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,19 +2,18 @@ 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 { BffCatalogRelatedEntity } from '@redocly/theme/core/types';
+import { CatalogEntityTypeIcon } from '@redocly/theme/components/Catalog/CatalogEntityTypeIcon';
+import { BffCatalogEntity } from '@redocly/theme/core/types';
 
-export type CatalogEntityCellProps = {
-  entity: BffCatalogRelatedEntity;
+type Entity = Pick<BffCatalogEntity, 'type' | 'title' | 'summary'>;
+export type CatalogEntityCellProps<T extends Entity> = {
+  entity: T;
 };
 
-export function CatalogEntityCell({ entity }: CatalogEntityCellProps) {
+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>
@@ -36,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/CatalogEntityRelationCell.tsx

@@ -0,0 +1,19 @@
+import type { BffCatalogRelatedEntity } from '@redocly/theme/core/types';
+
+import { reverseRelationMap } from '@redocly/theme/core/constants';
+
+export type CatalogEntityRelationCellProps = Pick<
+  BffCatalogRelatedEntity,
+  'relationType' | 'relationRole'
+>;
+
+export function CatalogEntityRelationCell({
+  relationType,
+  relationRole,
+}: CatalogEntityRelationCellProps) {
+  if (relationRole === 'source') {
+    return reverseRelationMap[relationType];
+  }
+
+  return relationType;
+}

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,24 +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';
-    default:
-      const exhaustiveCheck: never = type;
-      throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
-  }
-};
-
 const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
   {
     key: 'entity',
@@ -71,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,
@@ -150,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,24 +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';
-    default:
-      const exhaustiveCheck: never = type;
-      throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
-  }
-};
-
 const baseColumns: CatalogColumn<BffCatalogEntity>[] = [
   {
     key: 'entity',
@@ -66,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,
@@ -139,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 }) =>
@@ -177,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[];
@@ -35,21 +34,13 @@ export function CatalogTagsWithTooltip({
 
   if (items.length <= itemsToShow) {
     return (
-      <TooltipComponent
-        tip={items.join(', ')}
-        placement="bottom"
-        className="catalog"
-        width="400px"
-        disabled={items.join(', ').length <= CATALOG_TAG_MAX_LENGTH}
-      >
-        <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-          {items.map((item, index) => (
-            <Tag key={`${item}-${index}`} {...tagProps} maxLength={CATALOG_TAG_MAX_LENGTH}>
-              <CatalogHighlight>{item}</CatalogHighlight>
-            </Tag>
-          ))}
-        </CatalogTagsWrapper>
-      </TooltipComponent>
+      <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
+        {items.map((item, index) => (
+          <Tag key={`${item}-${index}`} {...tagProps} maxLength={CATALOG_TAG_MAX_LENGTH}>
+            <CatalogHighlight>{item}</CatalogHighlight>
+          </Tag>
+        ))}
+      </CatalogTagsWrapper>
     );
   }
 

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
@@ -254,9 +284,9 @@ 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-semibold);
-  --catalog-table-header-cell-padding: 5px 8px;
-  --catalog-table-cell-padding: 5px 8px;
+  --catalog-table-header-font-weight: var(--font-weight-medium);
+  --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);
@@ -286,7 +316,7 @@ export const catalog = css`
     */
   --catalog-table-entity-title-font-size: var(--catalog-card-title-font-size);
   --catalog-table-entity-title-line-height: var(--line-height-lg);
-  --catalog-table-entity-title-font-weight: var(--font-weight-semibold);
+  --catalog-table-entity-title-font-weight: var(--font-weight-medium);
 
   /**
     * @tokens Catalog table description
@@ -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;

package/src/components/Tag/Tag.tsx

@@ -51,6 +51,7 @@ export type TagProps = {
   onKeyDown?: (event: React.KeyboardEvent) => void;
   onClose?: (event: React.MouseEvent) => void;
   maxLength?: number;
+  textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
 };
 
 export function Tag({
@@ -68,6 +69,7 @@ export function Tag({
   withStatusDot,
   statusDotColor = 'var(--tag-status-dot-color-default)',
   maxLength,
+  textTransform,
   ...otherProps
 }: TagProps): JSX.Element {
   const truncateText = (text: string, maxLen: number): string => {
@@ -143,6 +145,7 @@ export function Tag({
       onClick={onClick}
       onKeyDown={onKeyDown}
       hasCloseButton={closable}
+      textTransform={textTransform}
       {...otherProps}
     >
       {withStatusDot ? <StatusDot color={statusDotColor} /> : icon ? icon : null}
@@ -187,7 +190,12 @@ const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
   className:
     (className || '') +
     ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
-}))<TagProps & { hasCloseButton?: boolean }>`
+}))<
+  TagProps & {
+    hasCloseButton?: boolean;
+    textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+  }
+>`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -209,7 +217,8 @@ const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
   font-weight: var(--tag-font-weight);
   line-height: var(--tag-line-height);
   box-shadow: var(--tag-box-shadow);
-  text-transform: var(--tag-text-transform);
+  ${({ textTransform }) =>
+    `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
 
   color: var(--tag-color);
   background-color: var(--tag-bg-color);