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

package/lib/markdoc/components/default.d.ts

@@ -2,8 +2,7 @@ export * from '../../markdoc/components/Admonition/Admonition';
 export * from '../../markdoc/components/InlineSvg/InlineSvg';
 export * from '../../markdoc/components/MarkdocExample/MarkdocExample';
 export * from '../../markdoc/components/Heading/Heading';
-export * from '../../markdoc/components/Mermaid/Mermaid';
-export * from '../../markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram';
+export * from '../../markdoc/components/Diagram/Diagram';
 export * from '../../markdoc/components/HtmlBlock/HtmlBlock';
 export * from '../../markdoc/components/Tabs/Tab';
 export * from '../../markdoc/components/Tabs/TabList';
@@ -23,3 +22,4 @@ export * from '../../markdoc/components/CodeGroup/CodeGroup';
 export * from '../../markdoc/components/Icon/Icon';
 export * from '../../markdoc/components/ConnectMCP/ConnectMCP';
 export * from '../../markdoc/components/LoginButton/LoginButton';
+export * from '../../markdoc/components/MarkdownLink/MarkdownLink';

package/lib/markdoc/components/default.js

@@ -18,8 +18,7 @@ __exportStar(require("../../markdoc/components/Admonition/Admonition"), exports)
 __exportStar(require("../../markdoc/components/InlineSvg/InlineSvg"), exports);
 __exportStar(require("../../markdoc/components/MarkdocExample/MarkdocExample"), exports);
 __exportStar(require("../../markdoc/components/Heading/Heading"), exports);
-__exportStar(require("../../markdoc/components/Mermaid/Mermaid"), exports);
-__exportStar(require("../../markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram"), exports);
+__exportStar(require("../../markdoc/components/Diagram/Diagram"), exports);
 __exportStar(require("../../markdoc/components/HtmlBlock/HtmlBlock"), exports);
 __exportStar(require("../../markdoc/components/Tabs/Tab"), exports);
 __exportStar(require("../../markdoc/components/Tabs/TabList"), exports);
@@ -39,4 +38,5 @@ __exportStar(require("../../markdoc/components/CodeGroup/CodeGroup"), exports);
 __exportStar(require("../../markdoc/components/Icon/Icon"), exports);
 __exportStar(require("../../markdoc/components/ConnectMCP/ConnectMCP"), exports);
 __exportStar(require("../../markdoc/components/LoginButton/LoginButton"), exports);
+__exportStar(require("../../markdoc/components/MarkdownLink/MarkdownLink"), exports);
 //# sourceMappingURL=default.js.map

package/lib/markdoc/default.d.ts

@@ -1,4 +1,5 @@
 export * from '../markdoc/attributes/code-snippet-file';
+export * from '../markdoc/attributes/diagram-file';
 export * from '../markdoc/attributes/img-src';
 export * from '../markdoc/attributes/img-srcset';
 export * from '../markdoc/attributes/relative-path';
@@ -24,6 +25,7 @@ import { codeGroup } from '../markdoc/tags/code-group';
 import { icon } from '../markdoc/tags/icon';
 import { connectMcp } from '../markdoc/tags/connect-mcp';
 import { loginButton } from '../markdoc/tags/login-button';
+import { diagram } from '../markdoc/tags/diagram';
 export declare const tags: {
     [admonition.tagName]: import("@markdoc/markdoc").Schema & {
         attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
@@ -125,4 +127,9 @@ export declare const tags: {
             resolver?: string;
         }>;
     };
+    [diagram.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
 };

package/lib/markdoc/default.js

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tags = exports.components = void 0;
 /* Attributes */
 __exportStar(require("../markdoc/attributes/code-snippet-file"), exports);
+__exportStar(require("../markdoc/attributes/diagram-file"), exports);
 __exportStar(require("../markdoc/attributes/img-src"), exports);
 __exportStar(require("../markdoc/attributes/img-srcset"), exports);
 __exportStar(require("../markdoc/attributes/relative-path"), exports);
@@ -66,6 +67,7 @@ const code_group_1 = require("../markdoc/tags/code-group");
 const icon_1 = require("../markdoc/tags/icon");
 const connect_mcp_1 = require("../markdoc/tags/connect-mcp");
 const login_button_1 = require("../markdoc/tags/login-button");
+const diagram_1 = require("../markdoc/tags/diagram");
 exports.tags = {
     [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
     [debug_1.debug.tagName]: debug_1.debug.schema,
@@ -87,5 +89,6 @@ exports.tags = {
     [icon_1.icon.tagName]: icon_1.icon.schema,
     [connect_mcp_1.connectMcp.tagName]: connect_mcp_1.connectMcp.schema,
     [login_button_1.loginButton.tagName]: login_button_1.loginButton.schema,
+    [diagram_1.diagram.tagName]: diagram_1.diagram.schema,
 };
 //# sourceMappingURL=default.js.map

package/lib/markdoc/tags/admonition.js

@@ -8,7 +8,7 @@ exports.admonition = {
                 type: String,
                 required: true,
                 default: 'info',
-                matches: ['warning', 'info', 'danger', 'success'],
+                matches: ['warning', 'info', 'danger', 'success', 'default'],
             },
             name: { type: String },
         },

package/lib/markdoc/tags/diagram.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const diagram: MarkdocSchemaWrapper;

package/lib/markdoc/tags/diagram.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.diagram = void 0;
+const markdoc_1 = __importDefault(require("@markdoc/markdoc"));
+const diagram_file_1 = require("../../markdoc/attributes/diagram-file");
+const DIAGRAM_TYPES = ['mermaid', 'plantuml', 'excalidraw'];
+const DIAGRAM_ALIGNMENTS = ['left', 'center', 'right'];
+exports.diagram = {
+    schema: {
+        attributes: {
+            file: { type: diagram_file_1.DiagramFile, required: true },
+            type: {
+                type: String,
+                required: true,
+                matches: DIAGRAM_TYPES,
+            },
+            align: {
+                type: String,
+                matches: DIAGRAM_ALIGNMENTS,
+            },
+            width: {
+                type: String,
+            },
+            rawContent: { type: String, render: false }, // internal — populated by resolver
+        },
+        render: 'Diagram',
+        selfClosing: true,
+        transform: (node, config) => {
+            const attributes = node.transformAttributes(config);
+            const rawContent = node.attributes.rawContent;
+            const diagramType = node.attributes.type;
+            if (typeof rawContent === 'string') {
+                return new markdoc_1.default.Tag('Diagram', Object.assign(Object.assign({}, attributes), { diagramType, diagramSource: rawContent }), []);
+            }
+            return new markdoc_1.default.Tag(node.tag, attributes, []);
+        },
+        validate(node) {
+            const errors = [];
+            const type = node.attributes.type;
+            if (type && !DIAGRAM_TYPES.includes(type)) {
+                errors.push({
+                    id: 'invalid-diagram-type',
+                    level: 'error',
+                    message: `Invalid diagram type "${type}". Must be one of: ${DIAGRAM_TYPES.join(', ')}`,
+                });
+            }
+            const align = node.attributes.align;
+            if (align && !DIAGRAM_ALIGNMENTS.includes(align)) {
+                errors.push({
+                    id: 'invalid-diagram-align',
+                    level: 'error',
+                    message: `Invalid diagram align "${align}". Must be one of: ${DIAGRAM_ALIGNMENTS.join(', ')}`,
+                });
+            }
+            return errors;
+        },
+    },
+    tagName: 'diagram',
+};
+//# sourceMappingURL=diagram.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.64.0-next.2",
+  "version": "0.64.0-next.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.10.0-next.0"
+    "@redocly/realm-asyncapi-sdk": "0.10.0-next.1"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -81,7 +81,7 @@
     "openapi-sampler": "^1.7.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.44.2"
+    "@redocly/config": "0.46.1"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Admonition/Admonition.tsx

@@ -7,9 +7,10 @@ import { WarningCycleIcon } from '@redocly/theme/icons/WarningCycleIcon/WarningC
 import { CheckmarkOutlineIcon } from '@redocly/theme/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon';
 import { ErrorIcon } from '@redocly/theme/icons/ErrorIcon/ErrorIcon';
 import { InformationIcon } from '@redocly/theme/icons/InformationIcon/InformationIcon';
+import { IdeaIcon } from '@redocly/theme/icons/IdeaIcon/IdeaIcon';
 
 type AdmonitionTypeProps = {
-  type: 'warning' | 'success' | 'danger' | 'info';
+  type: 'warning' | 'success' | 'danger' | 'info' | 'default';
 };
 
 export type AdmonitionProps = Partial<AdmonitionTypeProps> & {
@@ -24,6 +25,7 @@ const IconsMap: Record<AdmonitionTypeProps['type'], FC<{ color?: string }>> = {
   success: CheckmarkOutlineIcon,
   danger: ErrorIcon,
   info: InformationIcon,
+  default: IdeaIcon,
 };
 
 export function Admonition({

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

@@ -12,4 +12,7 @@ export const admonitionDarkMode = css`
 
   --admonition-success-bg-color: color-mix(in srgb, var(--color-green-1) 40%, transparent); // @presenter Color
   --admonition-success-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-green-3) 40%, transparent); // @presenter Border
+
+  --admonition-default-bg-color: color-mix(in srgb, var(--color-primary-bg, var(--admonition-default-bg-color-legacy)) 40%, transparent); // @presenter Color
+  --admonition-default-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-primary-border, var(--admonition-default-border-color-legacy)) 40%, transparent); // @presenter Border
 `;

package/src/components/Admonition/variables.ts

@@ -89,5 +89,18 @@ export const admonition = css`
   --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
 
+  /**
+  * @tokens Admonition type primary
+  */
+
+  --admonition-default-bg-color: var(--color-primary-bg, var(--admonition-default-bg-color-legacy)); // @presenter Color
+  --admonition-default-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-default-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-default-icon-color: var(--color-primary-base, var(--admonition-default-icon-color-legacy)); // @presenter Color
+  --admonition-default-border-color: var(--color-primary-border, var(--admonition-default-border-color-legacy)); // @presenter Color
+  --admonition-default-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-default-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-default-border: var(--admonition-default-border-width) var(--admonition-default-border-style) var(--admonition-default-border-color); // @presenter Border
+  
   // @tokens End
 `;

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

@@ -17,8 +17,8 @@ export const buttonDarkMode = css`
   --button-bg-color-secondary-hover: var(--color-warm-grey-5);
   --button-bg-color-secondary-pressed: var(--color-warm-grey-6);
   --button-bg-color-secondary-danger-pressed: var(--color-raspberry-9);
-  --button-bg-color-primary-hover: var(--color-blue-5);
-  --button-bg-color-primary-pressed: var(--color-blue-4);
+  --button-bg-color-primary-hover: var(--color-primary-hover, var(--button-bg-color-primary-hover-legacy));
+  --button-bg-color-primary-pressed: var(--color-primary-active, var(--button-bg-color-primary-pressed-legacy));
   --button-bg-color-primary-danger-hover: var(--color-raspberry-5);
   --button-bg-color-primary-danger-pressed: var(--color-raspberry-4);
   --button-bg-color-disabled: var(--color-warm-grey-3);

package/src/components/Button/variables.ts

@@ -24,9 +24,9 @@ export const button = css`
   --button-content-color-primary-hover: var(--color-blue-7); // @presenter Color
   --button-content-color-primary-pressed: var(--color-blue-8); // @presenter Color
 
-  --button-bg-color-primary: var(--color-blue-6); // @presenter Color
-  --button-bg-color-primary-hover: var(--color-blue-7); // @presenter Color
-  --button-bg-color-primary-pressed: var(--color-blue-8); // @presenter Color
+  --button-bg-color-primary: var(--color-primary-base, var(--button-bg-color-primary-legacy)); // @presenter Color
+  --button-bg-color-primary-hover: var(--color-primary-hover, var(--button-bg-color-primary-hover-legacy)); // @presenter Color
+  --button-bg-color-primary-pressed: var(--color-primary-active, var(--button-bg-color-primary-pressed-legacy)); // @presenter Color
 
   --button-bg-color-primary-danger: var(--color-raspberry-6); // @presenter Color
   --button-bg-color-primary-danger-hover: var(--color-raspberry-7); // @presenter Color

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

@@ -187,7 +187,9 @@ const VersionIcon = styled.div<{ $isCurrent?: boolean }>`
   flex-shrink: 0;
   border-radius: 50%;
   background-color: ${({ $isCurrent }) =>
-    $isCurrent ? 'var(--color-primary-base)' : 'var(--catalog-avatar-bg-color)'};
+    $isCurrent
+      ? 'var(--color-primary-base, var(--color-blueberry-6))'
+      : 'var(--catalog-avatar-bg-color)'};
   transition: background-color 0.2s ease;
   margin-right: var(--catalog-history-sidebar-version-icon-margin-right);
 

package/src/components/Catalog/CatalogTags.tsx

@@ -48,6 +48,7 @@ export function CatalogTags({
   if (shouldUseVariantWithTooltip) {
     const displayedItems = items.slice(0, itemsToShow);
     const remainingCount = items.length - itemsToShow;
+    const moreLabel = translate('catalog.tags.more', 'more');
 
     return (
       <Tooltip tip={items.join(', ')} placement="bottom" className="catalog">
@@ -70,7 +71,11 @@ export function CatalogTags({
             </Tag>
           ))}
 
-          {remainingCount > 0 && <MoreTagsButton>+ {remainingCount}</MoreTagsButton>}
+          {remainingCount > 0 && (
+            <MoreTagsButton>
+              + {remainingCount} <span data-translation-key="catalog.tags.more">{moreLabel}</span>
+            </MoreTagsButton>
+          )}
         </CatalogTagsWrapper>
       </Tooltip>
     );

package/src/components/Filter/variables.ts

@@ -22,7 +22,7 @@ export const filter = css`
   --filter-option-margin: 0;
 
   --filter-option-label-font-size: var(--font-size-base);
-  --filter-option-label-color: var(--text-color-secondary);
+  --filter-option-label-color: var(--text-color-primary);
 
   --filter-option-checkbox-padding-left: var(--spacing-xs);
 

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -52,17 +52,17 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
       placement={props.placement}
       alignment={props.alignment}
       trigger={languagePickerButton}
+      dataAttributes={{
+        'data-component-name': 'LanguagePicker/LanguagePicker',
+        'data-current-locale': currentLocale.code,
+      }}
     >
       <DropdownMenu items={languageItems} />
     </LanguageDropdown>
   );
 }
 
-const LanguageDropdown = styled(Dropdown).attrs(() => ({
-  dataAttributes: {
-    'data-component-name': 'LanguagePicker/LanguagePicker',
-  },
-}))`
+const LanguageDropdown = styled(Dropdown)`
   display: none;
   height: auto;
   @media screen and (min-width: ${breakpoints.medium}) {

package/src/components/Link/Link.tsx

@@ -4,7 +4,7 @@ import { Link as ReactLink } from 'react-router-dom';
 
 import type { JSX } from 'react';
 
-import { ThemeDataContext } from '@redocly/theme/core/contexts';
+import { ThemeDataContext } from '@redocly/theme/core/contexts/ThemeDataContext';
 
 export type LinkProps = {
   to: string;

package/src/components/Menu/MenuItem.tsx

@@ -291,6 +291,7 @@ const MenuItemLabelWrapper = styled.li<{
     css`
       color: ${deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
+      font-weight: var(--menu-item-font-weight-active);
 
       ${ChevronDownIcon} path {
         fill: var(--menu-item-color-active);
@@ -369,7 +370,10 @@ const MenuItemLink = styled(Link)`
   order: 1;
 `;
 
-const MenuItemSeparatorLine = styled.div<{ depth?: number; linePosition?: string }>`
+const MenuItemSeparatorLine = styled.div<{
+  depth?: number;
+  linePosition?: string;
+}>`
   height: var(--menu-item-separator-line-height);
   background-color: var(--menu-item-separator-line-bg-color);
   margin: ${({ depth }) => `

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

@@ -5,4 +5,6 @@ export const menuDarkMode = css`
   --menu-content-title-color: var(--text-color-secondary); // @presenter Color
   --menu-content-color-active: var(--text-color-primary); // @presenter Color
   --menu-content-color-disabled: var(--text-color-disabled); // @presenter Color
+
+  --menu-item-bg-color-active: var(--color-primary-bg, var(--menu-item-bg-color-active-legacy)); // @presenter Color
 `;

package/src/components/Menu/variables.ts

@@ -19,6 +19,7 @@ export const menu = css`
   --menu-item-font-family: var(--sidebar-font-family); // @presenter FontFamily
   --menu-item-font-size: var(--sidebar-font-size); // @presenter FontSize
   --menu-item-font-weight: var(--font-weight-regular); // @presenter FontSize
+  --menu-item-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
   --menu-item-line-height: var(--line-height-base); // @presenter LineHeight
 
     /**
@@ -28,11 +29,11 @@ export const menu = css`
   --menu-item-text-color: var(--sidebar-text-color); // @presenter Color
   --menu-item-bg-color: transparent; // @presenter Color
   --menu-item-bg-color-hover: var(--color-hover-base); // @presenter Color
-  --menu-item-bg-color-active: var(--tree-bg-color-active); // @presenter Color
+  --menu-item-bg-color-active: var(--color-primary-bg, var(--menu-item-bg-color-active-legacy)); // @presenter Color
 
   --menu-item-color-hover: var(--tree-content-color-hover); // @presenter Color
-  --menu-item-color-active: var(--tree-content-color-default); // @presenter Color
-
+  --menu-item-color-active: var(--color-primary-text, var(--menu-item-color-active-legacy)); // @presenter Color
+  
   /**
    * @tokens Menu item spacing
    * @presenter Spacing

package/src/components/Search/SearchAiMessage.tsx

@@ -26,6 +26,17 @@ function MarkdownSegment({ text }: { text: string }): JSX.Element {
   const markdown = useMarkdownText(text);
   return <ResponseText as="div" children={markdown} data-testid="response-text" />;
 }
+function getToolCallDisplayText(toolName: string): {
+  inProgressText: string;
+  completedText: string;
+} {
+  return (
+    TOOL_CALL_DISPLAY_TEXT[toolName] ?? {
+      inProgressText: `Executing ${toolName}...`,
+      completedText: `${toolName} executed`,
+    }
+  );
+}
 
 export type SearchAiMessageProps = {
   role: AiSearchConversationRole;
@@ -121,17 +132,11 @@ function SearchAiMessageComponent({
                 if (segment.type === 'tool') {
                   const toolCallCompleted = Boolean(segment.toolCall.result);
 
-                  const toolCallCompletedText =
-                    TOOL_CALL_DISPLAY_TEXT[segment.toolCall.name]?.completedText ??
-                    `${translate('search.ai.toolResult.found', 'Found')} ${segment.toolCall.result?.documentCount ?? 0} ${translate('search.ai.toolResult.found.documents', 'documents')}`;
-
-                  const toolCallInProgressText =
-                    TOOL_CALL_DISPLAY_TEXT[segment.toolCall.name]?.inProgressText ??
-                    translate('search.ai.toolCall.searching', 'Searching...');
+                  const { inProgressText, completedText } = getToolCallDisplayText(
+                    segment.toolCall.name,
+                  );
 
-                  const toolCallDisplayText = toolCallCompleted
-                    ? toolCallCompletedText
-                    : toolCallInProgressText;
+                  const toolCallDisplayText = toolCallCompleted ? completedText : inProgressText;
 
                   return (
                     <ToolCallsInfoWrapper key={`tool-${index}`} data-testid="tool-calls-info">

package/src/components/SvgViewer/SvgViewer.tsx

@@ -129,9 +129,6 @@ export function SvgViewer({
 
   const handleWheel = useCallback(
     (e: WheelEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
       setIsWheelZooming(true);
       if (wheelTimeoutRef.current) clearTimeout(wheelTimeoutRef.current);
       wheelTimeoutRef.current = setTimeout(() => setIsWheelZooming(false), 150);
@@ -186,7 +183,6 @@ export function SvgViewer({
 
   const handleTouchMove = useCallback(
     (e: ReactTouchEvent) => {
-      e.preventDefault();
       if (e.touches.length === 2 && pinchState) {
         const distance = getTouchDistance(e.touches);
         setScale(clampScale(pinchState.scale * (distance / pinchState.distance)));

package/src/components/SvgViewer/variables.ts

@@ -6,7 +6,7 @@ export const svgViewer = css`
    */
 
   --svg-viewer-overlay-bg-color: var(--bg-color-modal-overlay); // @presenter Color
-  --svg-viewer-bg-color: var(--bg-color); // @presenter Color
+  --svg-viewer-bg-color: var(--bg-color-raised); // @presenter Color
   --svg-viewer-border-radius: var(--border-radius-xl); // @presenter BorderRadius
   --svg-viewer-box-shadow: var(--bg-raised-shadow); // @presenter BoxShadow
 

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

@@ -2,7 +2,7 @@ import { css } from 'styled-components';
 
 export const switcherDarkMode = css`
     --switch-bg-color: transparent; // @presenter Color
-    --switch-bg-color-selected: var(--color-warm-grey-7); // @presenter Color
+    --switch-bg-color-selected: var(--color-primary-base, var(--switch-bg-color-selected-legacy)); // @presenter Color
     --switch-bg-color-hover: transparent; // @presenter Color
     --switch-bg-color-pressed: transparent; // @presenter Color
     --switch-bg-color-disabled: transparent; // @presenter Color
@@ -12,7 +12,7 @@ export const switcherDarkMode = css`
     --switch-border-color-hover: var(--color-warm-grey-7); // @presenter Color
     --switch-border-color-pressed: var(--color-warm-grey-8); // @presenter Color
     --switch-border-color-disabled: var(--color-warm-grey-5); // @presenter Color
-    --switch-border-color-selected: var(--color-warm-grey-7); // @presenter Color
+    --switch-border-color-selected: var(--color-primary-base, var(--switch-border-color-selected-legacy)); // @presenter Color
     --switch-border-width: var(--border-width); // @presenter Border
     --switch-border-radius: var(--border-radius); // @presenter BorderRadius
 

package/src/components/Switch/variables.ts

@@ -2,7 +2,7 @@ import { css } from 'styled-components';
 
 export const switcher = css`
     --switch-bg-color: var(--color-warm-grey-4); // @presenter Color
-    --switch-bg-color-selected: var(--color-warm-grey-9); // @presenter Color
+    --switch-bg-color-selected: var(--color-primary-base, var(--switch-bg-color-selected-legacy)); // @presenter Color
     --switch-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
     --switch-bg-color-pressed: var(--color-warm-grey-6); // @presenter Color
     --switch-bg-color-disabled: var(--color-warm-grey-3); // @presenter Color

package/src/components/TableOfContent/TableOfContent.tsx

@@ -128,6 +128,7 @@ const TableOfContentMenuItem = styled.a<{ depth: number }>`
   &.active {
     color: var(--toc-item-text-color-active);
     border-left: solid 2px var(--toc-item-border-color-active);
+    font-weight: var(--toc-item-font-weight-active);
   }
 
   :empty {

package/src/components/TableOfContent/variables.ts

@@ -24,12 +24,13 @@ export const toc = css`
 
   --toc-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --toc-item-text-color: var(--text-color-description); // @presenter Color
-  --toc-item-text-color-active: var(--text-color-primary); // @presenter Color
+  --toc-item-text-color-active: var(--color-primary-text, var(--toc-item-text-color-active-legacy)); // @presenter Color
   --toc-item-bg-color: transparent; // @presenter Color
   --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
   --toc-item-padding-vertical: calc(var(--toc-spacing-unit) / 2); // @presenter Spacing
   --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
-  --toc-item-border-color-active: var(--border-color-invers);
+  --toc-item-border-color-active: var(--color-primary-base, var(--toc-item-border-color-active-legacy));
+  --toc-item-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
 
   /**
     * @tokens TOC header