@redocly/theme 0.61.0-next.1 → 0.61.0-next.3

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

@@ -0,0 +1,93 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { CatalogEntityRevision } from '@redocly/theme/core/types';
+
+import { Link } from '@redocly/theme/components/Link/Link';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { buildRevisionUrl } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type CatalogEntityRevisionItemProps = {
+  revisionItem: CatalogEntityRevision;
+  basePath: string;
+  version?: string | null;
+};
+
+export function CatalogEntityRevisionItem({
+  revisionItem,
+  basePath,
+  version,
+}: CatalogEntityRevisionItemProps): React.ReactElement {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const revisionFilter = buildRevisionUrl(basePath, revisionItem.revisionDate, version) ?? basePath;
+  const isActive = revisionItem.isActive ?? false;
+
+  return (
+    <RevisionItemWrapper to={revisionFilter} $isActive={isActive}>
+      <RevisionNameRow>
+        <RevisionName>{revisionItem.name}</RevisionName>
+        {revisionItem.isCurrent && (
+          <Tag
+            color="grey"
+            borderless
+            textTransform="none"
+            style={{
+              fontSize: 'var(--font-size-xs)',
+              borderRadius: 'var(--catalog-history-sidebar-revision-tag-border-radius)',
+            }}
+          >
+            {translate('catalog.history.revision.current', 'current')}
+          </Tag>
+        )}
+      </RevisionNameRow>
+      <RevisionDate>{revisionItem.date}</RevisionDate>
+    </RevisionItemWrapper>
+  );
+}
+
+const RevisionItemWrapper = styled(Link)<{ $isActive?: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--catalog-history-sidebar-revision-item-padding);
+  margin-left: calc(-1 * var(--catalog-history-sidebar-revisions-padding-left));
+  padding-left: var(--catalog-history-sidebar-revisions-padding-left);
+  border-radius: var(--catalog-history-sidebar-revision-item-border-radius);
+  transition: 0.2s ease;
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+  background-color: ${({ $isActive }) =>
+    $isActive ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)' : 'transparent'};
+
+  &:hover {
+    background-color: ${({ $isActive }) =>
+      $isActive
+        ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)'
+        : 'var(--catalog-history-sidebar-revision-item-bg-color-hover)'};
+  }
+`;
+
+const RevisionNameRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 8px);
+`;
+
+const RevisionName = styled.span`
+  font-family: var(--catalog-history-sidebar-revision-name-font-family);
+  font-size: var(--catalog-history-sidebar-revision-name-font-size);
+  font-weight: var(--catalog-history-sidebar-revision-name-font-weight);
+  line-height: var(--catalog-history-sidebar-revision-name-line-height);
+  color: var(--catalog-history-sidebar-revision-name-color);
+`;
+
+const RevisionDate = styled.span`
+  font-family: var(--catalog-history-sidebar-revision-date-font-family);
+  font-size: var(--catalog-history-sidebar-revision-date-font-size);
+  font-weight: var(--catalog-history-sidebar-revision-date-font-weight);
+  line-height: var(--catalog-history-sidebar-revision-date-line-height);
+  color: var(--catalog-history-sidebar-revision-date-color);
+`;

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

@@ -0,0 +1,284 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+import type { CatalogEntityVersionHistoryGroup } from '@redocly/theme/core/types';
+
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
+import { CheckmarkOutlineIcon } from '@redocly/theme/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon';
+import { NavaidMilitaryIcon } from '@redocly/theme/icons/NavaidMilitaryIcon/NavaidMilitaryIcon';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { ShowMoreButton } from '@redocly/theme/components/Catalog/CatalogEntity/ShowMoreButton';
+import { CatalogEntityRevisionItem } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityRevisionItem';
+import { buildRevisionUrl } from '@redocly/theme/core/utils';
+import { VERSION_NOT_SPECIFIED } from '@redocly/theme/core/constants';
+
+const MAX_INITIAL_REVISIONS = 5;
+const MAX_REVISIONS = 20;
+
+export type CatalogEntityVersionItemProps = {
+  group: CatalogEntityVersionHistoryGroup;
+  basePath: string;
+  isExpanded: boolean;
+  onToggle: (version: string) => void;
+};
+
+export function CatalogEntityVersionItem({
+  group,
+  basePath,
+  isExpanded,
+  onToggle,
+}: CatalogEntityVersionItemProps): React.ReactElement {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const [showAllRevisions, setShowAllRevisions] = useState(false);
+
+  const revisions = group.revisions || [];
+  const hasRevisions = revisions.length > 0;
+  const hasMoreThanMax = revisions.length > MAX_INITIAL_REVISIONS;
+  const hasMoreThanLimit = revisions.length > MAX_REVISIONS;
+  const displayedRevisions = showAllRevisions
+    ? revisions.slice(0, MAX_REVISIONS)
+    : revisions.slice(0, MAX_INITIAL_REVISIONS);
+
+  useEffect(() => {
+    if (!isExpanded) {
+      setShowAllRevisions(false);
+    }
+  }, [isExpanded]);
+
+  const isNotSpecifiedVersion = group.version === VERSION_NOT_SPECIFIED;
+
+  const singleRevisionLink = buildRevisionUrl(basePath, group.singleRevisionDate, group.version);
+
+  const isClickable = hasRevisions || Boolean(singleRevisionLink);
+  const isSingleRevisionActive = Boolean(singleRevisionLink && group.isCurrent);
+
+  const versionTitle = isNotSpecifiedVersion
+    ? `${translate('catalog.history.version.label', 'Version')}: ${translate('catalog.history.version.notSpecified', 'not specified')}`
+    : `${translate('catalog.history.version.label', 'Version')}: ${group.version}`;
+
+  const versionButton = (
+    <VersionButton
+      type="button"
+      onClick={() => hasRevisions && onToggle(group.version)}
+      $isClickable={isClickable}
+      $isCurrent={group.isCurrent}
+      $isActive={isSingleRevisionActive}
+    >
+      <VersionIcon $isCurrent={group.isCurrent}>
+        {group.isCurrent ? (
+          <CheckmarkOutlineIcon
+            size="16px"
+            color="--catalog-history-sidebar-version-icon-color-current"
+          />
+        ) : (
+          <NavaidMilitaryIcon size="16px" color="--catalog-history-sidebar-version-icon-color" />
+        )}
+      </VersionIcon>
+      <VersionInfo>
+        <VersionTitleRow>
+          <VersionTitle>{versionTitle}</VersionTitle>
+          {group.isDefaultVersion && (
+            <Tag
+              color="grey"
+              borderless
+              textTransform="none"
+              style={{
+                fontSize: 'var(--font-size-xs)',
+                borderRadius: 'var(--catalog-history-sidebar-version-tag-border-radius)',
+                flexShrink: 0,
+              }}
+            >
+              {translate('catalog.history.version.default', 'default')}
+            </Tag>
+          )}
+        </VersionTitleRow>
+        {!isNotSpecifiedVersion && <VersionDate>{group.date}</VersionDate>}
+      </VersionInfo>
+      {hasRevisions && (
+        <ChevronIcon>
+          {isExpanded ? (
+            <ChevronDownIcon size="16px" color="--catalog-history-sidebar-chevron-icon-color" />
+          ) : (
+            <ChevronRightIcon size="16px" color="--catalog-history-sidebar-chevron-icon-color" />
+          )}
+        </ChevronIcon>
+      )}
+    </VersionButton>
+  );
+
+  return (
+    <li>
+      {singleRevisionLink ? <Link to={singleRevisionLink}>{versionButton}</Link> : versionButton}
+
+      {hasRevisions && isExpanded && (
+        <RevisionsList>
+          {displayedRevisions.map((revisionItem) => (
+            <CatalogEntityRevisionItem
+              key={revisionItem.name}
+              revisionItem={revisionItem}
+              basePath={basePath}
+              version={group.version}
+            />
+          ))}
+          {hasMoreThanLimit && showAllRevisions && (
+            <RevisionsLimitMessage>
+              {translate(
+                'catalog.history.revisions.limitMessage',
+                'Older revisions are not stored.',
+              )}
+            </RevisionsLimitMessage>
+          )}
+          {hasMoreThanMax && (
+            <ShowMoreButton
+              onClick={() => setShowAllRevisions(!showAllRevisions)}
+              isExpanded={showAllRevisions}
+            >
+              {showAllRevisions
+                ? translate('catalog.history.revisions.showLess', 'Show less')
+                : translate('catalog.history.revisions.showMore', {
+                    defaultValue: 'Show more',
+                    count: Math.min(
+                      revisions.length - MAX_INITIAL_REVISIONS,
+                      MAX_REVISIONS - MAX_INITIAL_REVISIONS,
+                    ),
+                  })}
+            </ShowMoreButton>
+          )}
+        </RevisionsList>
+      )}
+    </li>
+  );
+}
+
+const VersionButton = styled.button<{
+  $isClickable?: boolean;
+  $isCurrent?: boolean;
+  $isActive?: boolean;
+}>`
+  all: unset;
+  display: flex;
+  align-items: center;
+  width: calc(100% - var(--catalog-history-sidebar-version-icon-margin-right));
+  padding: var(--catalog-history-sidebar-version-header-padding);
+  cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
+  border-radius: var(--catalog-history-sidebar-version-header-border-radius);
+  transition: 0.2s ease;
+  text-decoration: none;
+  color: inherit;
+  background-color: ${({ $isActive }) =>
+    $isActive ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)' : 'transparent'};
+
+  ${({ $isClickable, $isActive }) =>
+    $isClickable &&
+    `
+    &:hover {
+      background-color: ${
+        $isActive
+          ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)'
+          : 'var(--catalog-history-sidebar-version-header-bg-color-hover)'
+      };
+    }
+  `}
+
+  ${({ $isCurrent }) =>
+    !$isCurrent &&
+    `
+    &:hover ${VersionIcon} {
+      background-color: var(--color-static-white);
+    }
+  `}
+`;
+
+const VersionIcon = styled.div<{ $isCurrent?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--catalog-history-sidebar-version-icon-size);
+  height: var(--catalog-history-sidebar-version-icon-size);
+  flex-shrink: 0;
+  border-radius: 50%;
+  background-color: ${({ $isCurrent }) =>
+    $isCurrent ? 'var(--color-primary-base)' : 'var(--catalog-avatar-bg-color)'};
+  transition: background-color 0.2s ease;
+  margin-right: var(--catalog-history-sidebar-version-icon-margin-right);
+
+  svg path {
+    transition: fill 0.2s ease;
+  }
+`;
+
+const VersionInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--catalog-history-sidebar-version-info-gap);
+`;
+
+const VersionTitleRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 8px);
+`;
+
+const VersionTitle = styled.span`
+  font-family: var(--catalog-history-sidebar-version-title-font-family);
+  font-size: var(--catalog-history-sidebar-version-title-font-size);
+  font-weight: var(--catalog-history-sidebar-version-title-font-weight);
+  line-height: var(--catalog-history-sidebar-version-title-line-height);
+  color: var(--catalog-history-sidebar-version-title-color);
+  flex-shrink: 1;
+  min-width: 0;
+`;
+
+const VersionDate = styled.span`
+  font-family: var(--catalog-history-sidebar-version-date-font-family);
+  font-size: var(--catalog-history-sidebar-version-date-font-size);
+  font-weight: var(--catalog-history-sidebar-version-date-font-weight);
+  line-height: var(--catalog-history-sidebar-version-date-line-height);
+  color: var(--catalog-history-sidebar-version-date-color);
+`;
+
+const ChevronIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: auto;
+`;
+
+const RevisionsList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-left: var(--catalog-history-sidebar-revisions-padding-left);
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 22px;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: var(
+      --catalog-history-sidebar-revision-line-color,
+      var(--border-color-secondary)
+    );
+  }
+`;
+
+const RevisionsLimitMessage = styled.div`
+  padding: var(--catalog-history-sidebar-revision-item-padding);
+  margin-left: calc(-1 * var(--catalog-history-sidebar-revisions-padding-left));
+  padding-left: var(--catalog-history-sidebar-revisions-padding-left);
+  font-family: var(--catalog-history-sidebar-revision-name-font-family);
+  font-size: var(--font-size-sm);
+  font-weight: var(--catalog-history-sidebar-revision-name-font-weight);
+  line-height: var(--catalog-history-sidebar-revision-name-line-height);
+  color: var(--catalog-history-sidebar-revisions-limit-message-color);
+  text-align: center;
+`;

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

@@ -2,11 +2,11 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
-import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
 import { capitalize, isPlainObject } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
+import { ShowMoreButton } from '@redocly/theme/components/Catalog/CatalogEntity/ShowMoreButton';
 
 const MAX_INITIAL_ITEMS = 4;
 
@@ -67,8 +67,8 @@ export function CatalogEntityMetadata({ entity }: CatalogEntityMetadataProps) {
         />
       ))}
       {hasMoreItems && (
-        <ShowMoreButton onClick={() => setIsOn(!isOn)}>
-          {isOn ? 'Show less' : 'Show more'} <ChevronIcon $isExpanded={isOn} />
+        <ShowMoreButton onClick={() => setIsOn(!isOn)} isExpanded={isOn}>
+          {isOn ? 'Show less' : 'Show more'}
         </ShowMoreButton>
       )}
     </MetadataWrapper>
@@ -108,25 +108,3 @@ const Heading = styled.h2`
   margin-top: 0;
   font-size: var(--catalog-metadata-heading-size);
 `;
-
-const ChevronIcon = styled(ChevronDownIcon)<{ $isExpanded: boolean }>`
-  transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0)')};
-  transition: transform 0.2s ease;
-`;
-
-const ShowMoreButton = styled.button`
-  background: none;
-  border: none;
-  display: flex;
-  align-items: center;
-  gap: var(--catalog-metadata-button-gap, 0.5rem);
-  cursor: pointer;
-  color: var(--catalog-metadata-button-color);
-  padding: 0;
-  font-weight: var(--font-weight-medium);
-  margin-top: var(--spacing-unit);
-
-  &:hover {
-    color: var(--catalog-metadata-button-color-hover);
-  }
-`;

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

@@ -1,4 +1,4 @@
-import React, { JSX, useState, useEffect } from 'react';
+import React, { JSX, useState, useEffect, useMemo } from 'react';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
@@ -40,12 +40,25 @@ export function CatalogEntityRelations({
     setFilter(ENTITY_DEFAULT_FILTERS[entity.key]);
   }, [entity.key]);
 
+  const combinedFilter = useMemo(() => {
+    const baseFilter = filter ?? ENTITY_DEFAULT_FILTERS[entity.type];
+    if (entity.version && entity.revision) {
+      const versionFilter = `version:"${entity.version}"`;
+      const revisionFilter = `revision:"${entity.revision}"`;
+      return baseFilter
+        ? `${baseFilter} AND ${versionFilter} AND ${revisionFilter}`
+        : `${versionFilter} AND ${revisionFilter}`;
+    }
+
+    return baseFilter;
+  }, [filter, entity.version, entity.type, entity.revision]);
+
   const { items: relations, query } = useFetchCatalogEntitiesRelations(
     {
       entityKey: entity.key,
       search: searchQuery,
       sort: sortOption ?? undefined,
-      filter: filter ?? ENTITY_DEFAULT_FILTERS[entity.type],
+      filter: combinedFilter,
       limit: 10,
     },
     initialRelations,

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+
+export type ShowMoreButtonProps = {
+  onClick: () => void;
+  children: React.ReactNode;
+  className?: string;
+  isExpanded?: boolean;
+};
+
+export function ShowMoreButton({
+  onClick,
+  children,
+  className,
+  isExpanded = false,
+}: ShowMoreButtonProps): React.ReactElement {
+  return (
+    <BaseShowMoreButton type="button" onClick={onClick} className={className}>
+      {children}
+      <ChevronIcon $isExpanded={isExpanded} />
+    </BaseShowMoreButton>
+  );
+}
+
+const BaseShowMoreButton = styled.button`
+  all: unset;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  gap: var(--catalog-show-more-button-gap);
+  color: var(--catalog-show-more-button-color);
+  padding: 0;
+  margin-top: var(--spacing-unit);
+
+  &:hover {
+    color: var(--catalog-show-more-button-color-hover);
+  }
+`;
+
+const ChevronIcon = styled(ChevronDownIcon)<{ $isExpanded: boolean }>`
+  transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0)')};
+  transition: transform 0.2s ease;
+`;

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

@@ -19,6 +19,8 @@ export type BaseEntity = {
   type: string;
   title: string;
   summary?: string | null;
+  revision?: string | null;
+  version?: string | null;
 };
 
 export type CatalogTableViewRowProps<T extends BaseEntity> = {
@@ -95,14 +97,17 @@ export const CatalogTableViewRow = <T extends BaseEntity>({
   const { getEntityDetailsLink } = useCatalogEntityDetails({
     catalogConfig,
     entitiesCatalogConfig,
+    revision: entity.revision,
+    version: entity.version,
   });
+  const link = getEntityDetailsLink({ key: entity.key, type: entity.type });
 
   return (
     <TableRow
       key={entity.id}
       $columnsWidths={columns.map((column) => column.width || '1fr')}
       $columnsMinWidths={columns.map((column) => column.minWidth || 'auto')}
-      to={getEntityDetailsLink(entity) + '?search='}
+      to={link}
       onClick={() => onRowClick(entity)}
       style={{ color: 'var(--catalog-page-wrapper-text-color)' }}
       data-component-name="Catalog/CatalogTableView/CatalogTableViewRow"

package/src/components/Catalog/variables.ts

@@ -235,6 +235,13 @@ export const catalog = css`
   --catalog-metadata-column-half-gap: var(--spacing-sm);
   --catalog-metadata-heading-size: var(--font-size-md);
 
+  /**
+    * @tokens Catalog show more button
+    */
+  --catalog-show-more-button-gap: 0.5rem;
+  --catalog-show-more-button-color: var(--text-color-primary);
+  --catalog-show-more-button-color-hover: var(--text-color-secondary);
+
   /**
     * @tokens Catalog arrow circle
     */
@@ -427,5 +434,110 @@ export const catalog = css`
   --catalog-entity-relations-edge-label-font-size: 12px;
   --catalog-entity-relations-edge-label-line-height: 1.2;
   // @tokens End
+
+  /**
+    * @tokens Catalog history button
+    */
+  --catalog-history-separator-border-color: var(--border-color-secondary);
+  --catalog-history-separator-margin-bottom: var(--spacing-sm);
+  --catalog-history-item-padding: var(--spacing-xxs);
+  --catalog-history-item-margin-bottom: calc(var(--spacing-xxs) * -1);
+  --catalog-history-item-gap: var(--spacing-xxs);
+  --catalog-history-item-border-radius: var(--menu-item-label-border-radius);
+  --catalog-history-item-bg-color-hover: var(--menu-item-bg-color-hover);
+  --catalog-history-icon-size: 16px;
+  --catalog-history-text-font-family: var(--font-family-base);
+  --catalog-history-text-font-size: var(--font-size-base);
+  --catalog-history-text-font-weight: var(--font-weight-regular);
+  --catalog-history-text-line-height: var(--line-height-base);
+  --catalog-history-text-color: var(--text-color-primary);
+  --catalog-history-pill-gap: var(--spacing-xxs);
+  --catalog-history-pill-padding-vertical: 1px;
+  --catalog-history-pill-padding-horizontal: var(--spacing-xs);
+  --catalog-history-pill-border-color: var(--border-color-primary);
+  --catalog-history-pill-border-radius: 12px;
+  --catalog-history-pill-icon-size: 14px;
+  --catalog-history-pill-icon-color: var(--color-green-8);
+  --catalog-history-pill-font-family: var(--font-family-base);
+  --catalog-history-pill-font-size: var(--font-size-base);
+  --catalog-history-pill-line-height: var(--line-height-base);
+  --catalog-history-pill-text-color: var(--text-color-primary);
+  // @tokens End
+
+  /**
+    * @tokens Catalog history sidebar
+    */
+  --catalog-history-sidebar-width: 320px;
+  --catalog-history-sidebar-bg-color: var(--sidebar-bg-color);
+  --catalog-history-sidebar-border-color: var(--border-color-secondary);
+
+  --catalog-history-sidebar-header-padding: var(--spacing-base) var(--spacing-sm) var(--spacing-base);
+  --catalog-history-sidebar-header-font-family: var(--font-family-base);
+  --catalog-history-sidebar-header-font-size: var(--font-size-base);
+  --catalog-history-sidebar-header-font-weight: var(--font-weight-semibold);
+  --catalog-history-sidebar-header-line-height: var(--line-height-base);
+  --catalog-history-sidebar-header-letter-spacing: 0;
+  --catalog-history-sidebar-header-color: var(--text-color-primary);
+
+  --catalog-history-sidebar-close-button-size: 32px;
+  --catalog-history-sidebar-close-button-border-radius: var(--border-radius-md);
+  --catalog-history-sidebar-close-button-bg-color-hover: var(--color-hover-base);
+  --catalog-history-sidebar-close-icon-color: var(--text-color-primary);
+
+  --catalog-history-sidebar-content-padding: 0 var(--spacing-sm);
+  --catalog-history-sidebar-content-margin-top: calc(var(--spacing-xxs) * -1);
+
+  --catalog-history-sidebar-version-header-padding: var(--spacing-xs) var(--spacing-xxs);
+  --catalog-history-sidebar-version-header-border-radius: var(--border-radius-md);
+  --catalog-history-sidebar-version-header-bg-color-hover: var(--color-hover-base);
+
+  --catalog-history-sidebar-version-icon-size: 32px;
+  --catalog-history-sidebar-version-icon-color: var(--text-color-secondary);
+  --catalog-history-sidebar-version-icon-color-current: var(--color-static-white);
+  --catalog-history-sidebar-version-icon-margin-right: var(--spacing-xs);
+  --catalog-history-sidebar-chevron-icon-color: var(--text-color-secondary);
+  --catalog-history-sidebar-version-info-gap: 2px;
+
+  --catalog-history-sidebar-version-title-font-family: var(--font-family-base);
+  --catalog-history-sidebar-version-title-font-size: var(--font-size-base);
+  --catalog-history-sidebar-version-title-font-weight: var(--font-weight-medium);
+  --catalog-history-sidebar-version-title-line-height: var(--line-height-base);
+  --catalog-history-sidebar-version-title-color: var(--color-warm-grey-7);
+
+  --catalog-history-sidebar-version-date-font-family: var(--font-family-base);
+  --catalog-history-sidebar-version-date-font-size: var(--font-size-sm);
+  --catalog-history-sidebar-version-date-font-weight: var(--font-weight-regular);
+  --catalog-history-sidebar-version-date-line-height: var(--line-height-sm);
+  --catalog-history-sidebar-version-date-color: var(--color-warm-grey-7);
+
+  --catalog-history-sidebar-revisions-padding-left: 40px;
+
+  --catalog-history-sidebar-revision-item-padding: var(--spacing-xs) var(--spacing-sm);
+  --catalog-history-sidebar-revision-item-border-radius: var(--border-radius-md);
+  --catalog-history-sidebar-revision-item-bg-color-hover: var(--bg-color-hover);
+
+  --catalog-history-sidebar-revision-name-font-family: var(--font-family-base);
+  --catalog-history-sidebar-revision-name-font-size: var(--font-size-base);
+  --catalog-history-sidebar-revision-name-font-weight: var(--font-weight-regular);
+  --catalog-history-sidebar-revision-name-line-height: var(--line-height-base);
+  --catalog-history-sidebar-revision-name-color: var(--text-color-primary);
+
+  --catalog-history-sidebar-revision-date-font-family: var(--font-family-base);
+  --catalog-history-sidebar-revision-date-font-size: var(--font-size-sm);
+  --catalog-history-sidebar-revision-date-font-weight: var(--font-weight-regular);
+  --catalog-history-sidebar-revision-date-line-height: var(--line-height-sm);
+  --catalog-history-sidebar-revision-date-color: var(--color-warm-grey-7);
+
+  --catalog-history-sidebar-revision-line-color: var(--border-color-secondary);
+  --catalog-history-sidebar-revision-item-bg-color-active: var(--bg-color-active);
+
+  --catalog-history-sidebar-revisions-limit-message-color: var(--color-warm-grey-6);
+
+  /**
+   * @tokens Catalog history tag border radius
+   */
+  --catalog-history-sidebar-version-tag-border-radius: var(--border-radius-xl);
+  --catalog-history-sidebar-revision-tag-border-radius: var(--border-radius-xl);
+  // @tokens End
 `;
 /* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/ColorModeSwitcher/ColorModeIcon.tsx

@@ -2,13 +2,15 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
+import type { ColorMode } from '@redocly/theme/core/types';
 
 import { ContrastIcon } from '@redocly/theme/icons/ContrastIcon/ContrastIcon';
 import { MoonIcon } from '@redocly/theme/icons/MoonIcon/MoonIcon';
 import { SunIcon } from '@redocly/theme/icons/SunIcon/SunIcon';
+import { DEFAULT_COLOR_MODES } from '@redocly/theme/core/constants';
 
 export type ColorModeIconProps = {
-  mode?: 'dark' | 'light' | string;
+  mode?: ColorMode | string;
   className?: string;
 };
 
@@ -20,9 +22,9 @@ export function ColorModeIcon(props: ColorModeIconProps): JSX.Element {
 
 function Icon({ mode, className }: ColorModeIconProps) {
   switch (mode) {
-    case 'dark':
+    case DEFAULT_COLOR_MODES.DARK:
       return <SunIcon data-testid="dark" />;
-    case 'light':
+    case DEFAULT_COLOR_MODES.LIGHT:
       return <MoonIcon data-testid="light" />;
     default:
       return <ContrastIcon data-testid="custom" className={className + (mode ? ' ' + mode : '')} />;