@redocly/theme 0.55.0-rc.1 → 0.55.0

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

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+
+export type CatalogTagsCellProps = {
+  entity: BffCatalogEntity;
+};
+
+export function CatalogTagsCell({ entity }: CatalogTagsCellProps) {
+  return (
+    <div data-component-name="Catalog/CatalogTableView/CatalogTagsCell">
+      <CatalogTagsWithTooltip
+        data-testid="catalog-tags-cell"
+        items={entity.tags || []}
+        showPlaceholder={false}
+        tagProps={{
+          style: {
+            fontSize: 'var(--font-size-base)',
+            borderRadius: 'var(--border-radius)',
+          },
+          borderless: true,
+          color: 'grey',
+        }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+
+export type CatalogUserEntityCellProps = {
+  name: string;
+  email: string;
+};
+
+const extractInitials = (name: string) => {
+  return name
+    .split(' ')
+    .map((n) => n[0])
+    .join('');
+};
+
+export function CatalogUserEntityCell({ name, email }: CatalogUserEntityCellProps) {
+  return (
+    <EntityTitleCellWrapper data-component-name="Catalog/CatalogTableView/CatalogUserEntityCell">
+      <Avatar>{extractInitials(name)}</Avatar>
+      <EntityTitleContent>
+        <EntityTitle>
+          <CatalogHighlight>{name}</CatalogHighlight>
+        </EntityTitle>
+        <Email>
+          <CatalogHighlight>{email}</CatalogHighlight>
+        </Email>
+      </EntityTitleContent>
+    </EntityTitleCellWrapper>
+  );
+}
+
+const EntityTitleCellWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+`;
+
+const Avatar = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: var(--catalog-avatar-bg-color);
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: 400;
+`;
+
+const EntityTitleContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+
+const EntityTitle = styled.div`
+  font-size: var(--catalog-table-entity-title-font-size);
+  line-height: var(--catalog-table-entity-title-line-height);
+  font-weight: var(--catalog-table-entity-title-font-weight);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const Email = styled.div`
+  font-size: var(--catalog-table-entity-summary-font-size);
+  line-height: var(--catalog-table-entity-summary-line-height);
+  color: var(--color-blue-6);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+`;

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -0,0 +1,83 @@
+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';
+
+export type CatalogTagsWithTooltipProps = {
+  items: string[];
+  itemsToShow?: number;
+  showPlaceholder?: boolean;
+  tagProps?: TagProps;
+};
+
+export function CatalogTagsWithTooltip({
+  items,
+  itemsToShow = 1,
+  showPlaceholder = true,
+  tagProps,
+}: CatalogTagsWithTooltipProps): JSX.Element | null {
+  if (!items || items.length === 0) {
+    if (showPlaceholder) {
+      return (
+        <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
+          <Tag style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }} color="grey">
+            N/A
+          </Tag>
+        </CatalogTagsWrapper>
+      );
+    }
+    return null;
+  }
+
+  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>
+    );
+  }
+
+  const displayedItems = items.slice(0, itemsToShow);
+  const remainingCount = items.length - itemsToShow;
+
+  return (
+    <TooltipComponent tip={items.join(', ')} placement="bottom" className="catalog" width="400px">
+      <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
+        {displayedItems.map((item, index) => (
+          <Tag key={`${item}-${index}`} {...tagProps} maxLength={CATALOG_TAG_MAX_LENGTH}>
+            <CatalogHighlight>{item}</CatalogHighlight>
+          </Tag>
+        ))}
+
+        <MoreTagsButton>+{remainingCount} more</MoreTagsButton>
+      </CatalogTagsWrapper>
+    </TooltipComponent>
+  );
+}
+
+const CatalogTagsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--catalog-tags-wrapper-gap);
+`;
+
+const MoreTagsButton = styled.span`
+  font-size: var(--catalog-tags-more-button-font-size);
+  margin-left: var(--catalog-tags-more-button-margin-left);
+`;

package/src/components/Catalog/CatalogViewModeToggle.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import { TableIcon } from '@redocly/theme/icons/TableIcon/TableIcon';
+import { CardsIcon } from '@redocly/theme/icons/CardsIcon/CardsIcon';
+import { CatalogViewMode } from '@redocly/theme/core';
+
+function useViewMode(initialViewMode: CatalogViewMode) {
+  const [viewMode, setViewMode] = useState<CatalogViewMode | null>(null);
+
+  useEffect(() => {
+    setViewMode(initialViewMode);
+  }, [initialViewMode]);
+
+  return viewMode;
+}
+
+export type CatalogViewModeToggleProps = {
+  viewMode: CatalogViewMode;
+  onViewModeChange: (mode: CatalogViewMode) => void;
+};
+
+export function CatalogViewModeToggle({
+  viewMode: initialViewMode,
+  onViewModeChange,
+}: CatalogViewModeToggleProps) {
+  const viewMode = useViewMode(initialViewMode);
+
+  return (
+    <ViewModeToggleWrapper data-component-name="Catalog/CatalogViewModeToggle">
+      <ViewModeButton
+        className={viewMode === 'table' ? 'active' : ''}
+        onClick={() => onViewModeChange('table')}
+      >
+        <TableIcon size="var(--catalog-view-mode-table-icon-size)" />
+      </ViewModeButton>
+      <ViewModeButton
+        className={viewMode === 'cards' ? 'active' : ''}
+        onClick={() => onViewModeChange('cards')}
+      >
+        <CardsIcon size="var(--catalog-view-mode-cards-icon-size)" />
+      </ViewModeButton>
+    </ViewModeToggleWrapper>
+  );
+}
+
+const ViewModeToggleWrapper = styled.div`
+  display: flex;
+  gap: var(--catalog-view-mode-toggle-gap);
+`;
+
+const ViewModeButton = styled.button`
+  width: var(--catalog-view-mode-button-width);
+  height: var(--catalog-view-mode-button-height);
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--catalog-view-mode-button-border-radius);
+
+  &.active {
+    background-color: var(--catalog-view-mode-toggle-active-bg-color);
+  }
+`;

package/src/components/Catalog/variables.dark.ts

@@ -0,0 +1,5 @@
+import { css } from 'styled-components';
+
+export const catalogDarkMode = css`
+  --catalog-avatar-bg-color: #3b3c45;
+`;

package/src/components/Catalog/variables.ts

@@ -0,0 +1,351 @@
+import { css } from 'styled-components';
+
+export const catalog = css`
+  /* === Catalog === */
+  /**
+    * @tokens Catalog page
+    */
+  --catalog-page-padding-vertical: var(--spacing-xl);
+  --catalog-page-padding-horizontal: var(--spacing-xxl);
+  --catalog-page-padding: var(--catalog-page-padding-vertical) var(--catalog-page-padding-horizontal);
+  --catalog-page-content-height: calc(100vh - var(--navbar-height) - var(--spacing-lg) * 2);
+
+  --catalog-filter-padding-vertical-mobile: 0;
+  --catalog-filter-padding-horizontal-mobile: var(--spacing-base);
+
+  --catalog-heading-margin: 0 0 var(--spacing-xl) 0;
+  --catalog-sidebar-width: 285px;
+
+  /**
+    * @tokens Catalog page wrapper
+    */
+  --catalog-page-wrapper-font-weight: var(--font-weight-regular);
+  --catalog-page-wrapper-text-color: var(--text-color-secondary);
+  --catalog-page-wrapper-font-size: var(--font-size-base);
+  --catalog-page-wrapper-font-family: var(--font-family-base);
+  --catalog-page-wrapper-line-height: var(--line-height-base);
+
+  /**
+    * @tokens Catalog page content
+    */
+  --catalog-page-content-width-mobile: 90%;
+  --catalog-page-content-width-desktop: 100%;
+  --catalog-page-content-margin-mobile: 0 auto;
+
+  /**
+    * @tokens Catalog page title
+    */
+  --catalog-title-text-color: var(--text-color-primary);
+  --catalog-title-font-weight: var(--font-weight-bold);
+  --catalog-title-font-size: var(--h3-font-size);
+  --catalog-title-margin: var(--spacing-sm) 0 var(--spacing-sm) 0;
+  --catalog-title-spacing-right: 8px;
+
+  /**
+    * @tokens Catalog page description
+    */
+  --catalog-description-text-color: var(--text-color-secondary);
+  --catalog-description-font-weight: var(--font-weight-regular);
+  --catalog-description-font-size: var(--font-size-lg);
+  --catalog-description-margin: 0 0 var(--spacing-sm) 0;
+  --catalog-description-line-height: var(--line-height-lg);
+
+  /**
+    * @tokens Catalog page separator
+    */
+  --catalog-separator-color: var(--text-color-secondary);
+  --catalog-separator-font-size: var(--font-size-base);
+  --catalog-separator-font-weight: var(--font-weight-regular);
+  --catalog-separator-border-color: var(--border-color-secondary);
+  --catalog-separator-margin: 0 0 var(--spacing-base) 0;
+  --catalog-separator-padding: var(--spacing-xxs) 0 0 0;
+  --catalog-separator-label-margin: 0 var(--spacing-xs);
+
+  /**
+    * @tokens Catalog separators and dividers
+    */
+  --catalog-hr-border-color: var(--border-color-primary);
+  --catalog-hr-border-width: 1px;
+  --catalog-hr-width: calc(100% + 48px);
+  --catalog-hr-margin: auto -24px 0 -24px;
+
+  /**
+    * @tokens Catalog links
+    */
+  --catalog-link-color: var(--link-color-primary);
+  --catalog-link-font-weight: var(--link-font-weight);
+  --catalog-link-text-decoration: none;
+
+  /**
+    * @tokens Catalog selector
+    */
+  --catalog-select-wrapper-margin-top: var(--spacing-xxs);
+  --catalog-select-wrapper-margin-bottom: var(--spacing-base);
+  --catalog-select-label-margin-bottom: var(--spacing-xxs);
+  --catalog-select-label-font-weight: var(--filter-title-font-weight);
+  --catalog-select-label-font-size: var(--filter-title-font-size);
+  --catalog-select-label-line-height: var(--filter-title-line-height);
+  --catalog-select-border-radius: var(--filter-input-border-radius);
+  --catalog-select-input-padding: var(--select-input-padding-vertical) var(--spacing-sm);
+  --catalog-select-icon-color: var(--input-t-icon-color);
+
+  /**
+    * @tokens Catalog highlight
+    */
+  --catalog-highlight-bg-color: var(--search-highlight-bg-color);
+  --catalog-highlight-text-color: var(--search-highlight-text-color);
+
+  /**
+    * @tokens Catalog entity icon
+    */
+  --catalog-entity-icon-color: var(--color-primary-base);
+
+  /**
+    * @tokens Catalog tags
+    */
+  --catalog-tags-wrapper-gap: 4px;
+  --catalog-tags-more-button-font-size: var(--font-size-base);
+  --catalog-tags-more-button-margin-left: 4px;
+  --catalog-tags-placeholder-bg-color: var(--bg-color);
+
+  /**
+    * @tokens Catalog empty state
+    */
+  --catalog-empty-state-padding: var(--catalog-table-empty-state-padding);
+  --catalog-empty-state-font-weight: var(--font-weight-regular);
+
+  /**
+    * @tokens Catalog actions
+    */
+  --catalog-actions-row-margin-bottom: var(--spacing-xl);
+  --catalog-controls-wrapper-gap: var(--spacing-sm);
+  --catalog-filter-input-width: 360px;
+
+  /**
+    * @tokens Catalog search input wrapper
+    */
+  --catalog-search-input-wrapper-width: var(--catalog-filter-input-width);
+
+  /**
+    * @tokens Catalog controls wrapper
+    */
+  --catalog-controls-wrapper-display: flex;
+  --catalog-controls-wrapper-align-items: center;
+  --catalog-controls-wrapper-margin-left: auto;
+
+  /**
+    * @tokens Catalog sort button
+    */
+  --catalog-sort-trigger-gap: var(--spacing-xs);
+  --catalog-sort-trigger-padding: 6px 8px;
+  --catalog-sort-trigger-border-radius: var(--border-radius-md);
+  --catalog-sort-trigger-hover-bg-color: var(--button-bg-color-secondary-hover);
+  --catalog-sort-icon-color: var(--text-color-secondary);
+  --catalog-sort-text-font-size: var(--font-size-sm);
+  --catalog-sort-text-color: var(--text-color-secondary);
+  --catalog-sort-text-font-weight: var(--font-weight-medium);
+
+  /**
+    * @tokens Catalog sidebar
+    */
+  --catalog-sidebar-display-mobile: none;
+  --catalog-sidebar-display-desktop: flex;
+  --catalog-sidebar-menu-container-padding-top: 0;
+
+  /**
+    * @tokens Catalog page description responsive
+    */
+  --catalog-page-description-display-mobile: none;
+  --catalog-page-description-display-desktop: block;
+
+  /**
+    * @tokens Catalog card
+    */
+  --catalog-card-min-height: 194px;
+  --catalog-card-min-width: 490px;
+  --catalog-card-padding-vertical: var(--spacing-base);
+  --catalog-card-padding-horizontal: var(--spacing-md);
+  --catalog-card-gap: var(--spacing-sm);
+  --catalog-card-text-color: var(--text-color-secondary);
+  --catalog-card-font-size: var(--font-size-base);
+  --catalog-card-font-weight: var(--font-weight-regular);
+  --catalog-card-bg-color: var(--layer-color);
+  --catalog-card-border-color: var(--border-color-secondary);
+  --catalog-card-divider-color: var(--border-color-secondary);
+  --catalog-card-border-width: var(--border-width);
+  --catalog-card-border-style: var(--border-style);
+  --catalog-card-border-color-hover: var(--border-color-primary);
+  --catalog-card-border-radius: var(--border-radius-lg);
+  --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
+  --catalog-cards-group-gap: var(--spacing-xl);
+
+  /**
+    * @tokens Catalog card icon
+    */
+  --catalog-card-icon-width: 30px;
+  --catalog-card-icon-height: 30px;
+  --catalog-card-icon-border-radius: 4px;
+  --catalog-card-icon-bg-color: var(--bg-color);
+  --catalog-card-icon-border-color: var(--border-color-secondary);
+  --catalog-card-icon-border-width: 1px;
+  --catalog-card-icon-margin-right: var(--spacing-xs);
+
+  /**
+    * @tokens Catalog metadata
+    */
+  --catalog-metadata-section-margin-top: var(--spacing-md);
+  --catalog-metadata-section-gap: var(--spacing-lg);
+  --catalog-metadata-label-font-size: var(--font-size-base);
+  --catalog-metadata-label-font-weight: var(--font-weight-medium);
+  --catalog-metadata-label-color: var(--text-color-secondary);
+  --catalog-metadata-label-margin-bottom: var(--spacing-unit);
+  --catalog-metadata-column-half-gap: var(--spacing-sm);
+  --catalog-metadata-heading-size: var(--font-size-md);
+
+  /**
+    * @tokens Catalog arrow circle
+    */
+  --catalog-arrow-circle-size: 32px;
+  --catalog-arrow-circle-radius: 16px;
+  --catalog-arrow-circle-bg-color: var(--button-bg-color-secondary);
+
+  /**
+    * @tokens Catalog card title
+    */
+  --catalog-card-title-color: var(--text-color-primary);
+  --catalog-card-title-min-height: var(--spacing-xxl);
+  --catalog-card-title-font-size: var(--font-size-lg);
+  --catalog-card-title-font-weight: var(--font-weight-bold);
+  --catalog-card-title-line-height: var(--line-height-lg);
+  --catalog-card-title-line-clamp: 2;
+
+  /**
+    * @tokens Catalog card description
+    */
+  --catalog-card-description-line-clamp: 3;
+  --catalog-card-description-color: var(--text-color-description);
+  --catalog-card-description-font-size: var(--font-size-base);
+  --catalog-card-description-line-height: var(--line-height-base);
+  --catalog-card-description-font-weight: var(--font-weight-regular);
+  --catalog-card-description-height: 62px;
+  --catalog-card-description-margin-top: 2px;
+
+  --catalog-card-content-gap: var(--spacing-xs);
+  --catalog-card-content-gap-vertical: var(--spacing-sm);
+
+  --catalog-card-tag-bg: transparent;
+
+  --catalog-actions-gap: var(--spacing-xs);
+  --catalog-actions-padding-vertical: var(--spacing-xs);
+  --catalog-actions-padding-horizontal: 5%;
+  --catalog-actions-min-height: 40px;
+  --catalog-actions-bg-color: var(--bg-color-tonal);
+
+  --catalog-page-badge-border-radius: var(--border-radius);
+  --catalog-page-badge-padding: 0 var(--spacing-xs);
+  --catalog-page-badge-font-size: var(--font-size-base);
+  --catalog-page-badge-line-height: var(--line-height-base);
+
+  --catalog-page-badge-dot-size: 6px;
+  --catalog-page-badge-dot-border-color: #ffffff;
+
+  /**
+    * @tokens Catalog table
+    */
+  --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-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);
+  --catalog-table-title-cell-gap: 12px;
+  --catalog-table-entity-title-content-offset: 42px;
+
+  /**
+    * @tokens Catalog table header
+    */
+  --catalog-table-header-sort-icon-color-active: var(--text-color-primary);
+  --catalog-table-header-sort-icon-color-inactive: var(--text-color-helper);
+  --catalog-table-header-sort-indicator-color: var(--icon-color-primary);
+  --catalog-table-header-sort-arrow-bg-active: var(--bg-color-active);
+
+  /**
+    * @tokens Catalog table icon
+    */
+  --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);
+  --catalog-table-icon-border-width: 1px;
+
+  /**
+    * @tokens Catalog table entity title
+    */
+  --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);
+
+  /**
+    * @tokens Catalog table description
+    */
+  --catalog-table-description-line-clamp: 3;
+  --catalog-table-description-color: var(--text-color-description);
+  --catalog-table-description-font-size: var(--font-size-base);
+  --catalog-table-description-line-height: var(--line-height-base);
+  --catalog-table-description-font-weight: var(--font-weight-regular);
+  --catalog-table-description-height: 62px;
+  --catalog-table-entity-summary-font-size: var(--font-size-sm);
+  --catalog-table-entity-summary-line-height: var(--line-height-sm);
+
+  --catalog-table-content-gap: var(--spacing-xxs);
+
+  --catalog-table-tag-bg: transparent;
+
+  /**
+    * @tokens Catalog entity type tags
+    */
+  --catalog-entity-service-tag-text-color: var(--color-blue-7);
+  --catalog-entity-service-tag-border-color: var(--color-blue-4);
+
+  --catalog-entity-domain-tag-text-color: var(--color-grass-8);
+  --catalog-entity-domain-tag-border-color: var(--color-grass-4);
+
+  --catalog-entity-team-tag-text-color: var(--color-purple-7);
+  --catalog-entity-team-tag-border-color: var(--color-purple-4);
+
+  --catalog-entity-user-tag-text-color: var(--color-green-7);
+  --catalog-entity-user-tag-border-color: var(--color-green-4);
+
+  --catalog-entity-api-description-tag-text-color: var(--color-sky-8);
+  --catalog-entity-api-description-tag-border-color: var(--color-sky-5);
+
+  /**
+    * @tokens Catalog view mode toggle
+    */
+  --catalog-view-mode-toggle-gap: var(--spacing-xxs);
+  --catalog-view-mode-toggle-active-bg-color: var(--button-bg-color-secondary-hover);
+  --catalog-view-mode-button-width: 32px;
+  --catalog-view-mode-button-height: 32px;
+  --catalog-view-mode-button-border-radius: var(--border-radius-md);
+  --catalog-view-mode-table-icon-size: 12px;
+  --catalog-view-mode-cards-icon-size: 13px;
+
+  /**
+    * @tokens Catalog empty state
+    */
+  --catalog-empty-state-text-color: var(--text-color-description);
+  --catalog-empty-state-min-height: 300px;
+  --catalog-empty-state-header-text-color: var(--text-color-primary);
+  --catalog-empty-state-header-font-size: var(--font-size-xl);
+  --catalog-empty-state-header-font-weight: var(--font-weight-medium);
+  --catalog-empty-state-header-line-height: var(--line-height-xl);
+  --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/CatalogClassic/CatalogClassicHighlight.tsx

@@ -48,7 +48,7 @@ export function CatalogClassicHighlight(props: CatalogClassicHighlightProps): JS
       </>
     );
   } else {
-    return <>children</> || null;
+    return <>{children}</>;
   }
 }
 

package/src/components/Dropdown/variables.ts

@@ -40,6 +40,6 @@ export const dropdown = css`
 
   --dropdown-menu-item-color-dangerous: var(--color-error-base);
 
-  --dropdown-menu-item-border-color-focused: var(--color-blue-4);
+  --dropdown-menu-item-border-color-focused: var(--button-border-color-focused);
   // @tokens End
 `;

package/src/components/Filter/Filter.tsx

@@ -14,14 +14,22 @@ const filterComponents = {
   checkboxes: FilterCheckboxes,
 } as const;
 
-export function Filter({ filter, filterValuesCasing }: FilterProps): JSX.Element | null {
+export function Filter({
+  filter,
+  filterValuesCasing,
+  showCounter = true,
+}: FilterProps): JSX.Element | null {
   if (!filter.parentUsed) return null;
 
   const FilterComponent = filterComponents[(filter.type || 'checkboxes') as FilterTypes];
 
   return (
     <FilterGroup data-component-name="Filter/Filter" key={filter.property + filter.title}>
-      <FilterComponent filter={filter} filterValuesCasing={filterValuesCasing} />
+      <FilterComponent
+        filter={filter}
+        filterValuesCasing={filterValuesCasing}
+        showCounter={showCounter}
+      />
     </FilterGroup>
   );
 }

package/src/components/Filter/FilterCheckboxes.tsx

@@ -13,7 +13,11 @@ import { CheckboxIcon } from '@redocly/theme/icons/CheckboxIcon/CheckboxIcon';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
 import { changeTextCasing } from '@redocly/theme/core/utils';
 
-export function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): JSX.Element {
+export function FilterCheckboxes({
+  filter,
+  filterValuesCasing,
+  showCounter = true,
+}: FilterProps): JSX.Element {
   const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
   const telemetry = useTelemetry();
@@ -24,7 +28,7 @@ export function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): J
         {translate(filter.titleTranslationKey, filter.title)}
       </FilterTitle>
       <FilterOptions>
-        {filter.filteredOptions.map(({ value, count }) => {
+        {filter.options.map(({ value, count }) => {
           const id = 'filter--' + filter.property + '--' + value;
           return (
             <FilterCheckboxOption
@@ -35,11 +39,11 @@ export function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): J
                 telemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
               }}
             >
-              <CheckboxIcon checked={filter.selectedOptions.has(value)} />
+              <CheckboxIcon checked={filter.selectedOptions.has(value?.toLowerCase())} />
               <FilterOptionLabel data-translation-key={value}>
                 {changeTextCasing(translate(value), filterValuesCasing)}
               </FilterOptionLabel>
-              <CounterTag borderless>{count}</CounterTag>
+              {showCounter && <CounterTag borderless>{count}</CounterTag>}
             </FilterCheckboxOption>
           );
         })}