@redocly/theme 0.69.0-next.1 → 0.69.0-next.10

package/src/components/Button/ButtonGroup.tsx

@@ -2,13 +2,11 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { ButtonSize } from '@redocly/theme/components/Button/Button';
+import type { ButtonGroupSize, ButtonGroupVariant } from '@redocly/theme/core/types';
 
-type ButtonGroupVariant = 'outlined';
-
-type ButtonGroupProps = {
+export type ButtonGroupProps = {
   variant?: ButtonGroupVariant;
-  size?: ButtonSize;
+  size?: ButtonGroupSize;
   children: React.ReactNode;
   className?: string;
 };
@@ -30,24 +28,44 @@ const ButtonGroupWrapper = styled.div`
   display: flex;
   line-height: var(--button-line-height);
 
-  .button {
+  & > .button,
+  & > * > .button {
     border-radius: 0;
   }
 
   & > .button:first-child,
-  *:first-child > .button {
+  & > *:first-child > .button {
     border-top-left-radius: var(--button-border-radius);
     border-bottom-left-radius: var(--button-border-radius);
   }
 
   & > .button:last-child,
-  *:last-child > .button {
+  & > *:last-child > .button {
     border-top-right-radius: var(--button-border-radius);
     border-bottom-right-radius: var(--button-border-radius);
   }
 
+  /* Adjacent segments share a single divider line: the leading segment drops its
+     own right border and the trailing one draws the divider as its left border. */
+  & > .button:not(:last-child),
+  & > *:not(:last-child) > .button {
+    border-right-style: none;
+    border-right-width: 0;
+  }
+
   & > .button:not(:first-child),
-  *:not(:first-child) > .button {
-    border-left: none;
+  & > *:not(:first-child) > .button {
+    border-left-width: 1px;
+    border-left-style: solid;
+    border-left-color: color-mix(
+      in srgb,
+      var(--button-group-divider-color) calc(var(--button-group-divider-opacity) * 100%),
+      transparent
+    );
+  }
+
+  & > .button:not(:first-child):disabled,
+  & > *:not(:first-child) > .button:disabled {
+    border-left-color: var(--button-group-divider-color-disabled);
   }
 `;

package/src/components/Button/variables.ts

@@ -68,7 +68,7 @@ export const button = css`
   --button-font-weight: var(--font-weight-regular);
   --button-font-size: var(--font-size-base);
   --button-line-height: var(--line-height-base);
-  --button-border-radius: var(--border-radius-md);
+  --button-border-radius: var(--border-radius-lg);
   --button-padding: 5px var(--spacing-sm);
   --button-text-wrap: nowrap;
   --button-gap: var(--spacing-xs);
@@ -94,7 +94,7 @@ export const button = css`
   .button-size-small,
   .button-group-size-small .button {
     --button-font-size: var(--font-size-base);
-    --button-border-radius: var(--border-radius);
+    --button-border-radius: var(--border-radius-md);
     --button-padding: 1px var(--spacing-sm);
     --button-line-height: var(--line-height-base);
     
@@ -107,7 +107,7 @@ export const button = css`
   .button-size-medium,
   .button-group-size-medium .button {
     --button-font-size: var(--font-size-base);
-    --button-border-radius: var(--border-radius-md);
+    --button-border-radius: var(--border-radius-lg);
     --button-padding: 5px var(--spacing-sm);
     --button-line-height: var(--line-height-base);
 
@@ -120,7 +120,7 @@ export const button = css`
   .button-size-large,
   .button-group-size-large .button {
     --button-font-size: var(--font-size-lg); // @presenter FontSize
-    --button-border-radius: var(--border-radius-md);
+    --button-border-radius: var(--border-radius-xl);
     --button-padding: var(--spacing-xs) var(--spacing-md);
     --button-line-height: var(--line-height-lg); // @presenter LineHeight
     
@@ -241,5 +241,28 @@ export const button = css`
     --button-icon-right-padding: 0;
   }
 
+  /**
+    * @tokens Button group divider
+    */
+
+  --button-group-divider-color: transparent;
+  --button-group-divider-opacity: 1;
+  --button-group-divider-color-disabled: var(--color-warm-grey-2); // @presenter Color
+
+  .button-group-primary {
+    --button-group-divider-color: var(--button-content-color-inverse); // @presenter Color
+    --button-group-divider-opacity: 0.32;
+  }
+
+  .button-group-secondary {
+    --button-group-divider-color: var(--button-content-color); // @presenter Color
+    --button-group-divider-opacity: 0.12;
+  }
+
+  .button-group-outlined {
+    --button-group-divider-color: var(--button-border-color); // @presenter Color
+    --button-group-divider-opacity: 1;
+  }
+
   // @tokens End
 `;

package/src/components/Buttons/ConnectMCPButton.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -6,14 +6,17 @@ import type { MCPOption } from '@redocly/theme/core/types';
 
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { DropdownMenuItemContent } from '@redocly/theme/components/Dropdown/DropdownMenuItemContent';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { SplitButton } from '@redocly/theme/components/SplitButton/SplitButton';
 import { CursorIcon } from '@redocly/theme/icons/CursorIcon/CursorIcon';
 import { VSCodeIcon } from '@redocly/theme/icons/VSCodeIcon/VSCodeIcon';
+import { ClaudeIcon } from '@redocly/theme/icons/ClaudeIcon/ClaudeIcon';
+import { CodexIcon } from '@redocly/theme/icons/CodexIcon/CodexIcon';
 import { CopyIcon } from '@redocly/theme/icons/CopyIcon/CopyIcon';
 import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
-import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
-import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
-import { useConnectMCPButton, useOutsideClick, useThemeHooks } from '@redocly/theme/core/hooks';
+import { useConnectMCPButton, useThemeHooks } from '@redocly/theme/core/hooks';
+import { DEFAULT_MCP_OPTIONS } from '@redocly/theme/core/constants';
 
 type MenuOption = {
   key: MCPOption;
@@ -41,6 +44,22 @@ const MENU_OPTIONS: MenuOption[] = [
     descriptionTranslationKey: 'page.actions.connectMcp.vscodeDescription',
     descriptionDefault: 'Install MCP server on VS Code',
   },
+  {
+    key: 'claude-code',
+    icon: ClaudeIcon,
+    titleTranslationKey: 'page.actions.connectMcp.claudeCode',
+    titleDefault: 'Connect to Claude Code',
+    descriptionTranslationKey: 'page.actions.connectMcp.claudeCodeDescription',
+    descriptionDefault: 'Copy the Claude Code CLI command',
+  },
+  {
+    key: 'codex',
+    icon: CodexIcon,
+    titleTranslationKey: 'page.actions.connectMcp.codex',
+    titleDefault: 'Connect to Codex CLI',
+    descriptionTranslationKey: 'page.actions.connectMcp.codexDescription',
+    descriptionDefault: 'Copy the Codex CLI command',
+  },
   {
     key: 'copy',
     icon: CopyIcon,
@@ -51,6 +70,9 @@ const MENU_OPTIONS: MenuOption[] = [
   },
 ];
 
+// Copy actions keep the dropdown open so the copied checkmark is visible.
+const COPY_OPTIONS: MCPOption[] = ['claude-code', 'codex', 'copy'];
+
 export type ConnectMCPButtonProps = {
   placement?: 'top' | 'bottom';
   alignment?: 'start' | 'end';
@@ -60,16 +82,12 @@ export type ConnectMCPButtonProps = {
 export function ConnectMCPButton({
   placement = 'bottom',
   alignment = 'end',
-  options = ['cursor', 'vscode', 'copy'],
+  options = DEFAULT_MCP_OPTIONS,
 }: ConnectMCPButtonProps): JSX.Element | null {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
-  const [isOpen, setIsOpen] = useState(false);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  const { isCopied, visibleOptions, handleAction } = useConnectMCPButton({ options });
 
-  useOutsideClick(wrapperRef, () => setIsOpen(false));
+  const { copiedOption, visibleOptions, handleAction } = useConnectMCPButton({ options });
 
   const menuOptions = MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key));
   const primaryOption = menuOptions[0];
@@ -78,76 +96,70 @@ export function ConnectMCPButton({
   if (!primaryOption) return null;
 
   const PrimaryIcon = primaryOption.icon;
-  // When copy is the primary action there is no dropdown item to show the copied state, so the
-  // primary button itself must reflect it.
-  const showPrimaryCopied = primaryOption.key === 'copy' && isCopied;
-
-  const handleMenuAction = (key: MCPOption) => {
-    handleAction(key);
-    setIsOpen(false);
-  };
+  const showPrimaryCopied = copiedOption === primaryOption.key;
 
   return (
-    <ConnectMCPButtonWrapper ref={wrapperRef} data-component-name="Buttons/ConnectMCPButton">
-      <SplitButtonGroup>
-        <PrimaryButton
-          variant="secondary"
-          icon={
-            showPrimaryCopied ? (
-              <CheckmarkFilledIcon color="var(--color-success-base)" />
-            ) : (
-              <PrimaryIcon />
-            )
-          }
-          onClick={() => handleAction(primaryOption.key)}
-        >
-          {translate(primaryOption.titleTranslationKey, primaryOption.titleDefault)}
-        </PrimaryButton>
-        {dropdownOptions.length > 0 && (
-          <ChevronButton
+    <ConnectMCPButtonWrapper data-component-name="Buttons/ConnectMCPButton">
+      <SplitButton
+        variant="secondary"
+        placement={placement}
+        alignment={alignment}
+        closeOnSelect={false}
+        toggleAriaLabel={translate('page.actions.connectMcp.moreOptions', 'More options')}
+        button={
+          <Button
             variant="secondary"
-            aria-label={translate('page.actions.connectMcp.moreOptions', 'More options')}
-            aria-expanded={isOpen}
-            aria-haspopup="menu"
-            onClick={() => setIsOpen((prev) => !prev)}
+            icon={
+              showPrimaryCopied ? (
+                <CheckmarkFilledIcon color="var(--color-success-base)" />
+              ) : (
+                <PrimaryIcon />
+              )
+            }
+            onClick={() => handleAction(primaryOption.key)}
           >
-            {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
-          </ChevronButton>
-        )}
-      </SplitButtonGroup>
-
-      {isOpen && dropdownOptions.length > 0 && (
-        <DropdownWrapper $placement={placement} $alignment={alignment}>
-          <DropdownMenu>
-            {dropdownOptions.map((option) => {
-              const Icon = option.icon;
-              const showCheckmark = option.key === 'copy' && isCopied;
-
-              return (
-                <DropdownMenuItem key={option.key} onAction={() => handleMenuAction(option.key)}>
-                  <MenuItemContent>
-                    <MenuItemIcon>
-                      {showCheckmark ? (
-                        <CheckmarkFilledIcon color="var(--color-success-base)" />
-                      ) : (
-                        <Icon />
-                      )}
-                    </MenuItemIcon>
-                    <MenuItemText>
-                      <MenuItemTitle>
-                        {translate(option.titleTranslationKey, option.titleDefault)}
-                      </MenuItemTitle>
-                      <MenuItemDescription>
-                        {translate(option.descriptionTranslationKey, option.descriptionDefault)}
-                      </MenuItemDescription>
-                    </MenuItemText>
-                  </MenuItemContent>
-                </DropdownMenuItem>
-              );
-            })}
-          </DropdownMenu>
-        </DropdownWrapper>
-      )}
+            {translate(primaryOption.titleTranslationKey, primaryOption.titleDefault)}
+          </Button>
+        }
+      >
+        {dropdownOptions.length > 0
+          ? ({ close }: { close: () => void }) => (
+              <DropdownMenu>
+                {dropdownOptions.map((option) => {
+                  const Icon = option.icon;
+                  const showCheckmark = copiedOption === option.key;
+
+                  return (
+                    <DropdownMenuItem
+                      key={option.key}
+                      onAction={() => {
+                        handleAction(option.key);
+                        if (!COPY_OPTIONS.includes(option.key)) {
+                          close();
+                        }
+                      }}
+                    >
+                      <DropdownMenuItemContent
+                        icon={
+                          showCheckmark ? (
+                            <CheckmarkFilledIcon color="var(--color-success-base)" />
+                          ) : (
+                            <Icon />
+                          )
+                        }
+                        title={translate(option.titleTranslationKey, option.titleDefault)}
+                        description={translate(
+                          option.descriptionTranslationKey,
+                          option.descriptionDefault,
+                        )}
+                      />
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenu>
+            )
+          : null}
+      </SplitButton>
     </ConnectMCPButtonWrapper>
   );
 }
@@ -156,72 +168,3 @@ const ConnectMCPButtonWrapper = styled.div`
   display: inline-block;
   position: relative;
 `;
-
-const SplitButtonGroup = styled.div`
-  display: inline-flex;
-  align-items: stretch;
-`;
-
-const PrimaryButton = styled(Button)`
-  --button-gap: var(--connect-mcp-button-gap);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-`;
-
-const ChevronButton = styled(Button)`
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-left: none;
-  padding-inline: var(--connect-mcp-button-chevron-padding-inline);
-`;
-
-const DropdownWrapper = styled.div<{ $placement?: string; $alignment?: string }>`
-  position: absolute;
-  top: ${({ $placement }) => ($placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ $placement }) => ($placement === 'top' ? '100%' : 'auto')};
-  left: ${({ $alignment }) => ($alignment === 'start' ? '0' : 'auto')};
-  right: ${({ $alignment }) => ($alignment === 'end' ? '0' : 'auto')};
-  padding-top: var(--dropdown-menu-padding-top);
-  z-index: var(--dropdown-menu-z-index);
-`;
-
-const MenuItemContent = styled.div`
-  display: flex;
-  align-items: center;
-  gap: var(--connect-mcp-button-menu-item-gap);
-  padding: var(--connect-mcp-button-menu-item-padding-block)
-    var(--connect-mcp-button-menu-item-padding-inline);
-`;
-
-const MenuItemIcon = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--connect-mcp-button-menu-item-icon-size);
-  height: var(--connect-mcp-button-menu-item-icon-size);
-  flex-shrink: 0;
-  border: var(--connect-mcp-button-menu-item-icon-border);
-  border-radius: var(--connect-mcp-button-menu-item-icon-border-radius);
-  color: var(--connect-mcp-button-menu-item-icon-color);
-`;
-
-const MenuItemText = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--connect-mcp-button-menu-item-text-gap);
-  flex: 1;
-`;
-
-const MenuItemTitle = styled.div`
-  font-size: var(--connect-mcp-button-menu-item-title-font-size);
-  font-weight: var(--connect-mcp-button-menu-item-title-font-weight);
-  line-height: var(--connect-mcp-button-menu-item-title-line-height);
-  color: var(--connect-mcp-button-menu-item-title-color);
-`;
-
-const MenuItemDescription = styled.div`
-  font-size: var(--connect-mcp-button-menu-item-description-font-size);
-  font-weight: var(--connect-mcp-button-menu-item-description-font-weight);
-  line-height: var(--connect-mcp-button-menu-item-description-line-height);
-  color: var(--connect-mcp-button-menu-item-description-color);
-`;

package/src/components/Buttons/CopyButton.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect, useRef } from 'react';
 
 import type { JSX } from 'react';
 import type { TooltipProps } from '@redocly/theme/core/types';
@@ -52,11 +52,23 @@ function CopyButtonComponent({
   const { useTranslate } = useThemeHooks();
   const tooltip = useControl();
   const { translate } = useTranslate();
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current);
+      }
+    };
+  }, []);
 
   const showTooltip = (duration: number = 1500): void => {
     tooltip.handleOpen();
 
-    setTimeout(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+    }
+    closeTimerRef.current = setTimeout(() => {
       tooltip.handleClose();
     }, duration);
   };

package/src/components/Buttons/variables.ts

@@ -46,49 +46,7 @@ export const aiAssistantButton = css`
 
   /* Transition */
   --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
-`;
-/* eslint-enable theme/no-raw-colors-in-styles */
-
-export const connectMCPButton = css`
-  /**
-   * @tokens Connect MCP Button
-   * @presenter Color
-   */
-
-  /* Button gap */
-  --connect-mcp-button-gap: var(--spacing-xs);
 
-  /* Chevron button */
-  --connect-mcp-button-chevron-padding-inline: var(--spacing-xs);
-
-  /* Menu item layout */
-  --connect-mcp-button-menu-item-gap: var(--spacing-sm);
-  --connect-mcp-button-menu-item-padding-block: var(--spacing-xxs);
-  --connect-mcp-button-menu-item-padding-inline: 0;
-
-  /* Menu item icon */
-  --connect-mcp-button-menu-item-icon-size: 32px;
-  --connect-mcp-button-menu-item-icon-border-color: var(--border-color-secondary);
-  --connect-mcp-button-menu-item-icon-border-style: solid;
-  --connect-mcp-button-menu-item-icon-border-width: 1px;
-  --connect-mcp-button-menu-item-icon-border: var(--connect-mcp-button-menu-item-icon-border-width)
-    var(--connect-mcp-button-menu-item-icon-border-style)
-    var(--connect-mcp-button-menu-item-icon-border-color);
-  --connect-mcp-button-menu-item-icon-border-radius: var(--border-radius);
-  --connect-mcp-button-menu-item-icon-color: var(--icon-color-secondary);
-
-  /* Menu item text */
-  --connect-mcp-button-menu-item-text-gap: var(--spacing-xxs);
-
-  /* Menu item title */
-  --connect-mcp-button-menu-item-title-font-size: var(--font-size-base);
-  --connect-mcp-button-menu-item-title-font-weight: var(--font-weight-regular);
-  --connect-mcp-button-menu-item-title-line-height: var(--line-height-base);
-  --connect-mcp-button-menu-item-title-color: var(--text-color-secondary);
-
-  /* Menu item description */
-  --connect-mcp-button-menu-item-description-font-size: var(--font-size-sm);
-  --connect-mcp-button-menu-item-description-font-weight: var(--font-weight-regular);
-  --connect-mcp-button-menu-item-description-line-height: var(--line-height-sm);
-  --connect-mcp-button-menu-item-description-color: var(--text-color-description);
+  // @tokens End
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/Catalog/CatalogEntities.tsx

@@ -88,6 +88,7 @@ export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
     (query.isPlaceholderData && entities && entities.length >= LOAD_MORE_THRESHOLD);
 
   useEffect(() => {
+    // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- the entities query lives in this ejectable component; the fetched total is mirrored up so the portal page header can show the count
     setEntitiesCounter(total || 0);
   }, [total, setEntitiesCounter]);
 

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

@@ -45,7 +45,7 @@ export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
 const LinksWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-xl);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;
   margin: var(--spacing-lg) 0;

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

@@ -82,7 +82,7 @@ const JsonViewerWrapper = styled(JsonViewer)`
 const MetadataWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-xl);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;
   margin-bottom: var(--spacing-base);

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

@@ -49,7 +49,7 @@ const PathLabel = styled.label`
 const LinksWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-xl);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;
   margin: 0 0 var(--spacing-base) 0;

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

@@ -1,4 +1,4 @@
-import React, { JSX, useState, useEffect, useMemo } from 'react';
+import React, { JSX, useState, useMemo } from 'react';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
@@ -35,10 +35,12 @@ export function CatalogEntityRelations({
   const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
 
   const [filter, setFilter] = useState<string | undefined>(ENTITY_DEFAULT_FILTERS[entity.type]);
+  const [prevEntityKey, setPrevEntityKey] = useState(entity.key);
 
-  useEffect(() => {
-    setFilter(ENTITY_DEFAULT_FILTERS[entity.key]);
-  }, [entity.key]);
+  if (prevEntityKey !== entity.key) {
+    setPrevEntityKey(entity.key);
+    setFilter(ENTITY_DEFAULT_FILTERS[entity.type]);
+  }
 
   const combinedFilter = useMemo(() => {
     const baseFilter = filter ?? ENTITY_DEFAULT_FILTERS[entity.type];

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

@@ -85,7 +85,7 @@ export function CatalogEntitySchema({
 const MetadataWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-xl);
   background-color: var(--catalog-metadata-bg-color);
   margin-bottom: var(--spacing-lg);
 `;

package/src/components/Catalog/CatalogFilter/CatalogFilterSelect.tsx

@@ -127,6 +127,7 @@ const StyledSelect = styled(Select)<SelectProps>`
   --select-text-color: var(--filter-select-color);
   border: 1px solid var(--filter-select-border-color);
   --select-border-radius: var(--filter-select-border-radius);
+  --select-input-border-radius: var(--filter-select-border-radius);
   padding: var(--filter-select-padding);
 
   &:hover {

package/src/components/Catalog/CatalogViewModeToggle.tsx

@@ -1,31 +1,16 @@
-import React, { useEffect, useState } from 'react';
+import React 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/types';
 
-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);
-
+export function CatalogViewModeToggle({ viewMode, onViewModeChange }: CatalogViewModeToggleProps) {
   return (
     <ViewModeToggleWrapper data-component-name="Catalog/CatalogViewModeToggle">
       <ViewModeButton

package/src/components/Catalog/variables.ts

@@ -190,7 +190,7 @@ export const catalog = css`
     */
   --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-border-radius: var(--border-radius-lg);
   --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);
@@ -220,7 +220,7 @@ export const catalog = css`
   --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-card-border-radius: var(--border-radius-xl);
   --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
   --catalog-cards-group-gap: var(--spacing-lg);
 
@@ -229,7 +229,7 @@ export const catalog = css`
     */
   --catalog-card-icon-width: 30px;
   --catalog-card-icon-height: 30px;
-  --catalog-card-icon-border-radius: 4px;
+  --catalog-card-icon-border-radius: var(--border-radius);
   --catalog-card-icon-bg-color: var(--bg-color);
   --catalog-card-icon-border-color: var(--border-color-secondary);
   --catalog-card-icon-border-width: 1px;
@@ -307,7 +307,7 @@ export const catalog = css`
   --catalog-actions-min-height: 40px;
   --catalog-actions-bg-color: var(--bg-color-tonal);
 
-  --catalog-page-badge-border-radius: var(--border-radius);
+  --catalog-page-badge-border-radius: var(--badge-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);
@@ -343,7 +343,7 @@ export const catalog = css`
     */
   --catalog-table-icon-width: 32px;
   --catalog-table-icon-height: 32px;
-  --catalog-table-icon-border-radius: 4px;
+  --catalog-table-icon-border-radius: var(--border-radius);
   --catalog-table-icon-bg-color: var(--bg-color-tonal);
   --catalog-table-icon-border-color: var(--border-color-secondary);
   --catalog-table-icon-border-width: 1px;