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

package/lib/components/Menu/variables.dark.js

@@ -7,5 +7,7 @@ exports.menuDarkMode = (0, styled_components_1.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
 `;
 //# sourceMappingURL=variables.dark.js.map

package/lib/components/Menu/variables.js

@@ -21,6 +21,7 @@ exports.menu = (0, styled_components_1.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
 
     /**
@@ -30,11 +31,11 @@ exports.menu = (0, styled_components_1.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/lib/components/Search/SearchDialog.js

@@ -43,6 +43,7 @@ const SearchInput_1 = require("../../components/Search/SearchInput");
 const SearchShortcut_1 = require("../../components/Search/SearchShortcut");
 const Button_1 = require("../../components/Button/Button");
 const utils_1 = require("../../core/utils");
+const Portal_1 = require("../../components/Portal/Portal");
 const SearchItem_1 = require("../../components/Search/SearchItem");
 const SearchRecent_1 = require("../../components/Search/SearchRecent");
 const SearchSuggestedPages_1 = require("../../components/Search/SearchSuggestedPages");
@@ -169,71 +170,60 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
     const showAiSearchButton = askAi && mode === 'search';
     const showAiSearchItem = showAiSearchButton && query;
     const showHeaderButtons = showSearchFilterButton || showAiSearchButton;
-    return (react_1.default.createElement(SearchOverlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onClick: handleOverlayClick, className: (0, utils_1.concatClassNames)('overlay', className) },
-        react_1.default.createElement(SearchDialogWrapper, { className: "scroll-lock", role: "dialog" },
-            react_1.default.createElement(SearchDialogHeader, null,
-                product && (react_1.default.createElement(SearchProductTag, { color: "product" },
-                    product.name,
-                    react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" }))),
-                mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: translate('search.label', 'Search docs...'), isLoading: isSearchLoading, inputRef: searchInputRef, onSubmit: () => {
-                            var _a;
-                            if (isSearchLoading)
-                                return;
-                            if (showAiSearchButton && aiQueryRef.current) {
-                                aiQueryRef.current.focus();
-                            }
-                            else {
-                                (_a = firstSearchResultRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                            }
-                        }, "data-translation-key": "search.label" }),
-                    showHeaderButtons && (react_1.default.createElement(SearchHeaderButtons, null,
-                        showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { icon: react_1.default.createElement(AiStarsGradientIcon_1.AiStarsGradientIcon, { color: "var(--search-ai-button-icon-color)" }), onClick: () => {
-                                setMode('ai-dialog');
-                                if (query.trim()) {
-                                    aiSearch.askQuestion(query);
+    return (react_1.default.createElement(Portal_1.Portal, null,
+        react_1.default.createElement(SearchOverlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onClick: handleOverlayClick, className: (0, utils_1.concatClassNames)('overlay', className) },
+            react_1.default.createElement(SearchDialogWrapper, { className: "scroll-lock", role: "dialog" },
+                react_1.default.createElement(SearchDialogHeader, null,
+                    product && (react_1.default.createElement(SearchProductTag, { color: "product" },
+                        product.name,
+                        react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" }))),
+                    mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: translate('search.label', 'Search docs...'), isLoading: isSearchLoading, inputRef: searchInputRef, onSubmit: () => {
+                                var _a;
+                                if (isSearchLoading)
+                                    return;
+                                if (showAiSearchButton && aiQueryRef.current) {
+                                    aiQueryRef.current.focus();
                                 }
-                                telemetry.sendSearchAiOpenedMessage([
-                                    {
-                                        object: 'search',
-                                        method: 'ai_search_button',
-                                    },
-                                ]);
-                            } }, translate('search.ai.button', 'Search with AI'))) : null,
-                        showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle })))))) : (react_1.default.createElement(AiDialogHeaderWrapper, null,
-                    initialMode === 'ai-dialog' ? (react_1.default.createElement(AiDialogHeaderTitle, null,
-                        react_1.default.createElement(AiStarsGradientIcon_1.AiStarsGradientIcon, { color: "var(--search-ai-button-icon-color)", size: "1.25rem" }),
-                        translate('search.ai.assistant', 'Assistant'))) : (react_1.default.createElement(Button_1.Button, { variant: "secondary", onClick: () => {
-                            setMode('search');
-                            aiSearch.clearConversation();
-                            focusSearchInput();
-                        }, tabIndex: 0, icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null) }, isMobile
-                        ? translate('search.ai.back', 'Back')
-                        : translate('search.ai.backToSearch', 'Back to search'))),
-                    react_1.default.createElement(AiDialogHeaderActionsWrapper, null,
-                        react_1.default.createElement(Button_1.Button, { variant: "secondary", disabled: !aiSearch.conversation.length, onClick: () => {
-                                refreshSearchSessionId();
+                                else {
+                                    (_a = firstSearchResultRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                }
+                            }, "data-translation-key": "search.label" }),
+                        showHeaderButtons && (react_1.default.createElement(SearchHeaderButtons, null,
+                            showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { icon: react_1.default.createElement(AiStarsGradientIcon_1.AiStarsGradientIcon, { color: "var(--search-ai-button-icon-color)" }), onClick: () => {
+                                    setMode('ai-dialog');
+                                    if (query.trim()) {
+                                        aiSearch.askQuestion(query);
+                                    }
+                                    telemetry.sendSearchAiOpenedMessage([
+                                        {
+                                            object: 'search',
+                                            method: 'ai_search_button',
+                                        },
+                                    ]);
+                                } }, translate('search.ai.button', 'Search with AI'))) : null,
+                            showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle })))))) : (react_1.default.createElement(AiDialogHeaderWrapper, null,
+                        initialMode === 'ai-dialog' ? (react_1.default.createElement(AiDialogHeaderTitle, null,
+                            react_1.default.createElement(AiStarsGradientIcon_1.AiStarsGradientIcon, { color: "var(--search-ai-button-icon-color)", size: "1.25rem" }),
+                            translate('search.ai.assistant', 'Assistant'))) : (react_1.default.createElement(Button_1.Button, { variant: "secondary", onClick: () => {
+                                setMode('search');
                                 aiSearch.clearConversation();
-                            }, tabIndex: 0, icon: react_1.default.createElement(EditIcon_1.EditIcon, null) }, translate('search.ai.newConversation', 'New conversation')),
-                        isMobile && react_1.default.createElement(Button_1.Button, { variant: "text", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), onClick: handleClose }))))),
-            react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
-                advancedSearch && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
-                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))),
-                react_1.default.createElement(SearchDialogBodyMainView, null,
-                    react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onQuickFilterReset: onQuickFilterReset, groupField: groupField }),
-                    showAiSearchItem && (react_1.default.createElement(SearchWithAI, { onClick: () => {
-                            setMode('ai-dialog');
-                            if (query.trim()) {
-                                aiSearch.askQuestion(query);
-                            }
-                            telemetry.sendSearchAiOpenedMessage([
-                                {
-                                    object: 'search',
-                                    method: 'ai_search_input',
-                                },
-                            ]);
-                        }, onKeyDown: (e) => {
-                            if (e.key === 'Enter') {
+                                focusSearchInput();
+                            }, tabIndex: 0, icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null) }, isMobile
+                            ? translate('search.ai.back', 'Back')
+                            : translate('search.ai.backToSearch', 'Back to search'))),
+                        react_1.default.createElement(AiDialogHeaderActionsWrapper, null,
+                            react_1.default.createElement(Button_1.Button, { variant: "secondary", disabled: !aiSearch.conversation.length, onClick: () => {
+                                    refreshSearchSessionId();
+                                    aiSearch.clearConversation();
+                                }, tabIndex: 0, icon: react_1.default.createElement(EditIcon_1.EditIcon, null) }, translate('search.ai.newConversation', 'New conversation')),
+                            isMobile && react_1.default.createElement(Button_1.Button, { variant: "text", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), onClick: handleClose }))))),
+                react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    advancedSearch && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
+                        react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))),
+                    react_1.default.createElement(SearchDialogBodyMainView, null,
+                        react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onQuickFilterReset: onQuickFilterReset, groupField: groupField }),
+                        showAiSearchItem && (react_1.default.createElement(SearchWithAI, { onClick: () => {
                                 setMode('ai-dialog');
                                 if (query.trim()) {
                                     aiSearch.askQuestion(query);
@@ -244,60 +234,72 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                                         method: 'ai_search_input',
                                     },
                                 ]);
+                            }, onKeyDown: (e) => {
+                                if (e.key === 'Enter') {
+                                    setMode('ai-dialog');
+                                    if (query.trim()) {
+                                        aiSearch.askQuestion(query);
+                                    }
+                                    telemetry.sendSearchAiOpenedMessage([
+                                        {
+                                            object: 'search',
+                                            method: 'ai_search_input',
+                                        },
+                                    ]);
+                                }
+                            }, ref: aiQueryRef, tabIndex: 0, role: "option", "aria-selected": "true" },
+                            react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { style: { flexShrink: 0 }, color: "var(--search-ai-icon-color)", size: "36px", background: "var(--search-ai-icon-bg-color)", margin: "0 var(--spacing-md) 0 0", borderRadius: "var(--border-radius-lg)" }),
+                            react_1.default.createElement(QueryWrapper, null,
+                                react_1.default.createElement(Typography_1.Typography, { fontWeight: "var(--font-weight-semibold)" }, query)),
+                            react_1.default.createElement(Typography_1.Typography, null,
+                                "- ",
+                                translate('search.ai.label', 'Ask AI assistant')),
+                            react_1.default.createElement(ReturnKeyIcon_1.ReturnKeyIcon, { color: "var(--search-item-text-color)" }))),
+                        showResults ? (searchKeysWithResults.length ? (searchKeysWithResults.map((key, searchGroupKeyIdx) => {
+                            const searchResultItems = items[key];
+                            if (searchResultItems === null || searchResultItems === void 0 ? void 0 : searchResultItems.length) {
+                                return (react_1.default.createElement(react_1.Fragment, { key: key },
+                                    react_1.default.createElement(SearchGroupTitle, { "data-testid": "search-group-title" }, key),
+                                    searchResultItems.map((item, idx, resultsArr) => mapItem(item, idx, resultsArr, searchGroupKeyIdx === 0 ? firstSearchResultRef : undefined)),
+                                    showLoadMore(key, searchResultItems.length || 0) && (react_1.default.createElement(SearchGroupFooter, { tabIndex: 0, "data-translation-key": "search.showMore", onKeyDown: (e) => {
+                                            if (e.key === 'Enter') {
+                                                setLoadMore({
+                                                    groupKey: key,
+                                                    offset: searchResultItems.length || 0,
+                                                });
+                                            }
+                                        }, onClick: () => setLoadMore({
+                                            groupKey: key,
+                                            offset: searchResultItems.length || 0,
+                                        }) }, translate('search.showMore', 'Show more')))));
                             }
-                        }, ref: aiQueryRef, tabIndex: 0, role: "option", "aria-selected": "true" },
-                        react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { style: { flexShrink: 0 }, color: "var(--search-ai-icon-color)", size: "36px", background: "var(--search-ai-icon-bg-color)", margin: "0 var(--spacing-md) 0 0", borderRadius: "var(--border-radius-lg)" }),
-                        react_1.default.createElement(QueryWrapper, null,
-                            react_1.default.createElement(Typography_1.Typography, { fontWeight: "var(--font-weight-semibold)" }, query)),
-                        react_1.default.createElement(Typography_1.Typography, null,
-                            "- ",
-                            translate('search.ai.label', 'Ask AI assistant')),
-                        react_1.default.createElement(ReturnKeyIcon_1.ReturnKeyIcon, { color: "var(--search-item-text-color)" }))),
-                    showResults ? (searchKeysWithResults.length ? (searchKeysWithResults.map((key, searchGroupKeyIdx) => {
-                        const searchResultItems = items[key];
-                        if (searchResultItems === null || searchResultItems === void 0 ? void 0 : searchResultItems.length) {
-                            return (react_1.default.createElement(react_1.Fragment, { key: key },
-                                react_1.default.createElement(SearchGroupTitle, { "data-testid": "search-group-title" }, key),
-                                searchResultItems.map((item, idx, resultsArr) => mapItem(item, idx, resultsArr, searchGroupKeyIdx === 0 ? firstSearchResultRef : undefined)),
-                                showLoadMore(key, searchResultItems.length || 0) && (react_1.default.createElement(SearchGroupFooter, { tabIndex: 0, "data-translation-key": "search.showMore", onKeyDown: (e) => {
-                                        if (e.key === 'Enter') {
-                                            setLoadMore({
-                                                groupKey: key,
-                                                offset: searchResultItems.length || 0,
-                                            });
-                                        }
-                                    }, onClick: () => setLoadMore({
-                                        groupKey: key,
-                                        offset: searchResultItems.length || 0,
-                                    }) }, translate('search.showMore', 'Show more')))));
-                        }
-                        return null;
-                    })) : isSearchLoading ? (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.loading" },
-                        react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "26px", color: "var(--search-input-icon-color)" }),
-                        translate('search.loading', 'Loading...'))) : (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.noResults" },
-                        react_1.default.createElement("b", null, translate('search.noResults.title', 'No results'))))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: (query, index) => {
-                                telemetry.sendSearchRecentClickedMessage([
-                                    {
-                                        object: 'search',
-                                        query,
-                                        index: index.toString(),
-                                        searchSessionId,
-                                    },
-                                ]);
-                                setQuery(query);
-                                focusSearchInput();
-                            } }),
-                        react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))))) : (react_1.default.createElement(SearchAiDialog_1.SearchAiDialog, { initialMessage: query, response: aiSearch.response, isGeneratingResponse: aiSearch.isGeneratingResponse, error: aiSearch.error, resources: aiSearch.resources, conversation: aiSearch.conversation, setConversation: aiSearch.setConversation, onMessageSent: aiSearch.askQuestion, toolCalls: aiSearch.toolCalls, contentSegments: aiSearch.contentSegments }))),
-            react_1.default.createElement(SearchDialogFooter, null, mode === 'ai-dialog' ? (react_1.default.createElement(AiDisclaimer, null, translate('search.ai.disclaimer', 'AI search might provide incomplete or incorrect results. Verify important information.'))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(SearchShortcuts, null,
-                    react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.navigate", combination: "Tab", text: translate('search.keys.navigate', 'to navigate') }),
-                    react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.select", combination: "\u23CE", text: translate('search.keys.select', 'to select') }),
-                    react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.exit", combination: "Esc", text: translate('search.keys.exit', 'to exit') })),
-                isSearchLoading && (react_1.default.createElement(SearchLoading, null,
-                    react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "16px", color: "var(--search-input-icon-color)" }),
-                    translate('search.loading', 'Loading...'))),
-                react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: handleClose }, translate('search.cancel', 'Cancel'))))))));
+                            return null;
+                        })) : isSearchLoading ? (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.loading" },
+                            react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "26px", color: "var(--search-input-icon-color)" }),
+                            translate('search.loading', 'Loading...'))) : (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.noResults" },
+                            react_1.default.createElement("b", null, translate('search.noResults.title', 'No results'))))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: (query, index) => {
+                                    telemetry.sendSearchRecentClickedMessage([
+                                        {
+                                            object: 'search',
+                                            query,
+                                            index: index.toString(),
+                                            searchSessionId,
+                                        },
+                                    ]);
+                                    setQuery(query);
+                                    focusSearchInput();
+                                } }),
+                            react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))))) : (react_1.default.createElement(SearchAiDialog_1.SearchAiDialog, { initialMessage: query, response: aiSearch.response, isGeneratingResponse: aiSearch.isGeneratingResponse, error: aiSearch.error, resources: aiSearch.resources, conversation: aiSearch.conversation, setConversation: aiSearch.setConversation, onMessageSent: aiSearch.askQuestion, toolCalls: aiSearch.toolCalls, contentSegments: aiSearch.contentSegments }))),
+                react_1.default.createElement(SearchDialogFooter, null, mode === 'ai-dialog' ? (react_1.default.createElement(AiDisclaimer, null, translate('search.ai.disclaimer', 'AI search might provide incomplete or incorrect results. Verify important information.'))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(SearchShortcuts, null,
+                        react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.navigate", combination: "Tab", text: translate('search.keys.navigate', 'to navigate') }),
+                        react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.select", combination: "\u23CE", text: translate('search.keys.select', 'to select') }),
+                        react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.exit", combination: "Esc", text: translate('search.keys.exit', 'to exit') })),
+                    isSearchLoading && (react_1.default.createElement(SearchLoading, null,
+                        react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "16px", color: "var(--search-input-icon-color)" }),
+                        translate('search.loading', 'Loading...'))),
+                    react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: handleClose }, translate('search.cancel', 'Cancel')))))))));
 }
 const SearchOverlay = styled_components_1.default.div `
   position: fixed;

package/lib/components/SvgViewer/variables.dark.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.svgViewerDarkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.svgViewerDarkMode = (0, styled_components_1.css) `
-  --svg-viewer-bg-color: var(--color-warm-grey-3);
+  --svg-viewer-bg-color: var(--color-warm-grey-9);
 `;
 //# sourceMappingURL=variables.dark.js.map

package/lib/components/Switch/variables.dark.js

@@ -4,7 +4,7 @@ exports.switcherDarkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.switcherDarkMode = (0, styled_components_1.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
@@ -14,7 +14,7 @@ exports.switcherDarkMode = (0, styled_components_1.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/lib/components/Switch/variables.js

@@ -4,7 +4,7 @@ exports.switcher = void 0;
 const styled_components_1 = require("styled-components");
 exports.switcher = (0, styled_components_1.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/lib/components/TableOfContent/TableOfContent.js

@@ -122,6 +122,7 @@ const TableOfContentMenuItem = styled_components_1.default.a `
   &.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/lib/components/TableOfContent/variables.js

@@ -26,12 +26,13 @@ exports.toc = (0, styled_components_1.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

package/lib/components/Toast/Toast.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import type { ToastItem } from '../../core/types';
+export interface ToastComponentProps {
+    toast: ToastItem;
+    onDismiss: (id: string) => void;
+    stackIndex: number;
+    stackZIndex?: number;
+    className?: string;
+}
+declare function ToastComponent({ toast, onDismiss, stackIndex, stackZIndex, className, }: ToastComponentProps): ReactElement;
+export declare const Toast: React.MemoExoticComponent<typeof ToastComponent>;
+export declare const spin: import("styled-components").Keyframes;
+export {};

package/lib/components/Toast/Toast.js

@@ -0,0 +1,239 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.spin = exports.Toast = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
+const CircleDashIcon_1 = require("../../icons/CircleDashIcon/CircleDashIcon");
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const ErrorFilledIcon_1 = require("../../icons/ErrorFilledIcon/ErrorFilledIcon");
+const InformationFilledIcon_1 = require("../../icons/InformationFilledIcon/InformationFilledIcon");
+const WarningFilledIcon_1 = require("../../icons/WarningFilledIcon/WarningFilledIcon");
+const hooks_1 = require("../../core/hooks");
+const Button_1 = require("../../components/Button/Button");
+const toast_1 = require("../../core/constants/toast");
+function renderToastIcon(type) {
+    switch (type) {
+        case 'success':
+            return react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { size: "--toast-icon-size", color: "--toast-icon-color-success" });
+        case 'warning':
+            return react_1.default.createElement(WarningFilledIcon_1.WarningFilledIcon, { size: "--toast-icon-size", color: "--toast-icon-color-warning" });
+        case 'error':
+            return react_1.default.createElement(ErrorFilledIcon_1.ErrorFilledIcon, { size: "--toast-icon-size", color: "--toast-icon-color-error" });
+        case 'loading':
+            return react_1.default.createElement(CircleDashIcon_1.CircleDashIcon, { size: "--toast-icon-size", color: "--toast-icon-color-loading" });
+        case 'info':
+        default:
+            return react_1.default.createElement(InformationFilledIcon_1.InformationFilledIcon, { size: "--toast-icon-size", color: "--toast-icon-color-info" });
+    }
+}
+function renderDismissButton(onClick) {
+    return (react_1.default.createElement(CloseButton, { "aria-label": "Dismiss notification", title: "Dismiss notification", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, { size: "--toast-close-button-icon-size", color: "--toast-close-button-icon-color" }), onClick: onClick }));
+}
+function ToastComponent({ toast, onDismiss, stackIndex, stackZIndex = 1, className, }) {
+    const { wrapperRef, hasDetails, dismissToast, handleMouseEnter, handleMouseLeave, ariaRole, ariaLive, } = (0, hooks_1.useToastLogic)({
+        toast,
+        onDismiss,
+        stackIndex,
+    });
+    const icon = renderToastIcon(toast.type);
+    const content = !hasDetails ? (react_1.default.createElement(SimpleToastSurface, { "$isExiting": toast.isExiting, "aria-live": ariaLive, role: ariaRole },
+        react_1.default.createElement(ContentWrapper, null,
+            react_1.default.createElement(IconWrapper, null, icon),
+            react_1.default.createElement(SimpleContent, null,
+                react_1.default.createElement(SimpleText, null, toast.title))),
+        renderDismissButton(dismissToast))) : (react_1.default.createElement(DetailedToastSurface, { "$isExiting": toast.isExiting, "aria-live": ariaLive, role: ariaRole },
+        react_1.default.createElement(ContentWrapper, null,
+            react_1.default.createElement(IconWrapper, null, icon),
+            react_1.default.createElement(Body, null,
+                react_1.default.createElement(TitleRow, null,
+                    react_1.default.createElement(TitleText, null, toast.title),
+                    renderDismissButton(dismissToast)),
+                toast.description ? (react_1.default.createElement(DescriptionRow, null,
+                    react_1.default.createElement(DescriptionText, null, toast.description))) : null))));
+    return (react_1.default.createElement(ToastWrapper, { ref: wrapperRef, "$stackZIndex": stackZIndex, className: className, "data-component-name": "Toast/Toast", "data-testid": `toast-${toast.type}`, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, content));
+}
+exports.Toast = (0, react_1.memo)(ToastComponent);
+const slideIn = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const slideOut = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+`;
+exports.spin = (0, styled_components_1.keyframes) `
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+`;
+const ToastWrapper = styled_components_1.default.div `
+  position: relative;
+  z-index: ${({ $stackZIndex }) => $stackZIndex};
+  width: 100%;
+  pointer-events: auto;
+  will-change: transform;
+`;
+const ToastSurface = styled_components_1.default.div `
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  min-width: var(--toast-min-width);
+  max-width: var(--toast-max-width);
+  background-color: var(--toast-bg-color);
+  border: var(--toast-border);
+  border-radius: var(--toast-border-radius);
+  box-shadow: var(--toast-box-shadow);
+  color: var(--toast-text-color);
+  font-family: var(--toast-font-family);
+  animation: ${({ $isExiting }) => $isExiting
+    ? (0, styled_components_1.css) `
+          ${slideOut} ${toast_1.TOAST_SLIDE_DURATION_MS}ms ease-in forwards
+        `
+    : (0, styled_components_1.css) `
+          ${slideIn} ${toast_1.TOAST_SLIDE_DURATION_MS}ms ease-out
+        `};
+
+  @media (max-width: 480px) {
+    min-width: 0;
+    max-width: none;
+  }
+`;
+const SimpleToastSurface = (0, styled_components_1.default)(ToastSurface) `
+  gap: var(--toast-simple-gap);
+  padding: var(--toast-simple-padding);
+`;
+const DetailedToastSurface = (0, styled_components_1.default)(ToastSurface) `
+  padding: var(--toast-detailed-padding);
+`;
+const ContentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex: 1 1 auto;
+  gap: var(--toast-content-gap);
+  min-width: 0;
+`;
+const IconWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--toast-icon-size);
+  min-width: var(--toast-icon-size);
+  height: var(--toast-icon-line-height);
+
+  ${CircleDashIcon_1.CircleDashIcon} {
+    animation: ${exports.spin} var(--toast-loading-animation-duration) linear infinite;
+  }
+`;
+const flexItemStyles = (0, styled_components_1.css) `
+  flex: 1 1 auto;
+  min-width: 0;
+`;
+const SimpleContent = styled_components_1.default.div `
+  ${flexItemStyles}
+`;
+const Body = styled_components_1.default.div `
+  display: flex;
+  ${flexItemStyles}
+  flex-direction: column;
+`;
+const TitleRow = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--toast-title-gap);
+  min-width: 0;
+`;
+const DescriptionRow = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--toast-description-gap);
+  min-width: 0;
+`;
+const textStyles = (0, styled_components_1.css) `
+  margin: 0;
+  font-size: var(--toast-text-font-size);
+  line-height: var(--toast-text-line-height);
+  color: var(--toast-text-color);
+  overflow-wrap: anywhere;
+`;
+const TitleText = styled_components_1.default.p `
+  ${textStyles}
+  ${flexItemStyles}
+  font-weight: var(--toast-title-font-weight);
+`;
+const SimpleText = styled_components_1.default.p `
+  ${textStyles}
+  font-weight: var(--toast-body-font-weight);
+`;
+const DescriptionText = styled_components_1.default.p `
+  ${textStyles}
+  ${flexItemStyles}
+  font-weight: var(--toast-body-font-weight);
+`;
+const CloseButton = (0, styled_components_1.default)(Button_1.Button).attrs({
+    variant: 'ghost',
+    size: 'small',
+}) `
+  flex: 0 0 auto;
+  min-height: unset;
+  margin: 0;
+  padding: var(--toast-close-button-padding);
+  color: var(--toast-close-button-icon-color);
+
+  &:hover,
+  &:focus-visible {
+    border: none;
+  }
+`;
+//# sourceMappingURL=Toast.js.map

package/lib/components/Toast/variables.d.ts

@@ -0,0 +1 @@
+export declare const toast: import("styled-components").FlattenSimpleInterpolation;