@redocly/theme 0.69.0-next.4 → 0.69.0-next.6

package/src/components/Banner/variables.ts

@@ -8,7 +8,7 @@ export const banner = css`
   --banner-button-size: 22px;
   --banner-button-padding: 3px; // @presenter Spacing
   --banner-button-font-size: var(--font-size-base);
-  --banner-button-border-radius: var(--border-radius);
+  --banner-button-border-radius: var(--border-radius-md);
   --banner-button-padding-inline: 1px var(--spacing-sm);
   --banner-button-line-height: var(--line-height-base); // @presenter LineHeight
   --banner-button-icon-size: 14px;
@@ -47,5 +47,7 @@ export const banner = css`
   --banner-error-link-color: var(--banner-error-text-color); // @presenter Color
   --banner-error-link-decoration: underline 1px var(--banner-error-link-color);
   --banner-error-link-decoration-hover: underline 2px var(--banner-error-link-color);
+
+  // @tokens End
 `;
 

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -61,7 +61,7 @@ const baseBreadcrumbStyles = `
   align-items: center;
   gap: var(--breadcrumbs-gap);
   padding: var(--breadcrumb-padding);
-  border-radius: var(--border-radius);
+  border-radius: var(--breadcrumbs-border-radius);
   color: var(--breadcrumbs-text-color);
   text-decoration: none;
 

package/src/components/Breadcrumbs/variables.ts

@@ -13,7 +13,7 @@ export const breadcrumbs = css`
   --breadcrumbs-icon-size: var(--font-size-base); // @presenter FontSize
   --breadcrumbs-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
 
-  --breadcrumbs-border-radius: var(--border-radius); // @presenter BorderRadius
+  --breadcrumbs-border-radius: var(--border-radius-md); // @presenter BorderRadius
   --breadcrumbs-gap: var(--spacing-xxs); // @presenter Spacing
 
   --breadcrumbs-padding: 2px var(--spacing-xs); // @presenter Spacing

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,16 +6,16 @@ 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 = {
@@ -86,13 +86,9 @@ export function ConnectMCPButton({
 }: ConnectMCPButtonProps): JSX.Element | null {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
-  const [isOpen, setIsOpen] = useState(false);
-  const wrapperRef = useRef<HTMLDivElement>(null);
 
   const { copiedOption, visibleOptions, handleAction } = useConnectMCPButton({ options });
 
-  useOutsideClick(wrapperRef, () => setIsOpen(false));
-
   const menuOptions = MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key));
   const primaryOption = menuOptions[0];
   const dropdownOptions = menuOptions.slice(1);
@@ -102,74 +98,68 @@ export function ConnectMCPButton({
   const PrimaryIcon = primaryOption.icon;
   const showPrimaryCopied = copiedOption === primaryOption.key;
 
-  const handleMenuAction = (key: MCPOption) => {
-    handleAction(key);
-    if (!COPY_OPTIONS.includes(key)) {
-      setIsOpen(false);
-    }
-  };
-
   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 = copiedOption === option.key;
-
-              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>
   );
 }
@@ -178,80 +168,3 @@ const ConnectMCPButtonWrapper = styled.div`
   display: inline-block;
   position: relative;
 `;
-
-const SplitButtonGroup = styled.div`
-  display: inline-flex;
-  align-items: stretch;
-`;
-
-/* Doubled selectors outrank the base button class in any style injection order,
-   and margin: 0 keeps themed button margins from splitting the group apart. */
-const PrimaryButton = styled(Button)`
-  && {
-    --button-gap: var(--connect-mcp-button-gap);
-    margin: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-`;
-
-const ChevronButton = styled(Button)`
-  && {
-    margin: 0;
-    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/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/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/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;

package/src/components/CatalogClassic/variables.ts

@@ -57,7 +57,7 @@ export const catalogClassic = css`
   --catalog-classic-card-border-width: var(--border-width);
   --catalog-classic-card-border-style: var(--border-style);
   --catalog-classic-card-border-color-hover: var(--border-color-primary);
-  --catalog-classic-card-border-radius: var(--border-radius-xxl);
+  --catalog-classic-card-border-radius: var(--border-radius-xl);
   --catalog-classic-cards-group-margin: 0 0 var(--spacing-base) 0;
   --catalog-classic-cards-group-gap: var(--spacing-xl);
 
@@ -94,7 +94,7 @@ export const catalogClassic = css`
   --catalog-classic-actions-min-height: 40px;
   --catalog-classic-actions-bg-color: var(--bg-color-tonal);
 
-  --catalog-classic-page-badge-border-radius: var(--border-radius);
+  --catalog-classic-page-badge-border-radius: var(--border-radius-md);
   --catalog-classic-page-badge-padding: 0 var(--spacing-xs);
   --catalog-classic-page-badge-font-size: var(--font-size-base);
   --catalog-classic-page-badge-line-height: var(--line-height-base);

package/src/components/CodeBlock/CodeBlock.tsx

@@ -130,6 +130,7 @@ export function CodeBlock({
   useEffect(() => {
     const _source = source || externalSource?.sample?.get?.(externalSource);
     if (_source) {
+      // oxlint-disable-next-line react-you-might-not-need-an-effect/no-derived-state
       setSourceCode(_source);
     }
   }, [source, externalSource]);
@@ -204,7 +205,7 @@ const ContainerWrapper = styled.div`
 
 const CodeBlockWrapper = styled.div`
   border: 1px solid var(--border-color-secondary);
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-xl);
   background-color: var(--code-block-bg-color);
   margin: 0 0 var(--spacing-sm);
 

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -55,6 +55,7 @@ const CodeBlockContainerComponent = styled.pre<{
     max-height: ${({ $maxHeight }) =>
       $maxHeight ? $maxHeight : 'var(--code-block-max-height, 600px);'};
     word-break: var(--code-block-word-break, initial);
+    border-radius: var(--border-radius-xl);
 
     pre,
     code {