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

package/lib/core/styles/global.js

@@ -30,22 +30,22 @@ const variables_25 = require("../../components/Product/variables");
 const variables_26 = require("../../components/Markdown/variables");
 const variables_27 = require("../../components/Banner/variables");
 const variables_28 = require("../../markdoc/components/Tabs/variables");
-const variables_29 = require("../../markdoc/components/Mermaid/variables");
-const variables_30 = require("../../markdoc/components/ExcalidrawDiagram/variables");
-const variables_31 = require("../../components/LastUpdated/variables");
-const variables_32 = require("../../components/Logo/variables");
-const variables_33 = require("../../components/StatusCode/variables");
-const variables_34 = require("../../components/Segmented/variables");
-const variables_35 = require("../../components/UserMenu/variables");
-const variables_36 = require("../../components/Tags/variables");
-const variables_37 = require("../../components/VersionPicker/variables");
-const variables_38 = require("../../components/DatePicker/variables");
-const variables_39 = require("../../components/Switch/variables");
-const variables_40 = require("../../markdoc/components/Cards/variables");
-const variables_41 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_42 = require("../../components/SkipContent/variables");
-const variables_43 = require("../../components/PageActions/variables");
-const variables_44 = require("../../components/SvgViewer/variables");
+const variables_29 = require("../../markdoc/components/Diagram/variables");
+const variables_30 = require("../../components/LastUpdated/variables");
+const variables_31 = require("../../components/Logo/variables");
+const variables_32 = require("../../components/StatusCode/variables");
+const variables_33 = require("../../components/Segmented/variables");
+const variables_34 = require("../../components/UserMenu/variables");
+const variables_35 = require("../../components/Tags/variables");
+const variables_36 = require("../../components/VersionPicker/variables");
+const variables_37 = require("../../components/DatePicker/variables");
+const variables_38 = require("../../components/Switch/variables");
+const variables_39 = require("../../markdoc/components/Cards/variables");
+const variables_40 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_41 = require("../../components/SkipContent/variables");
+const variables_42 = require("../../components/PageActions/variables");
+const variables_43 = require("../../components/SvgViewer/variables");
+const variables_44 = require("../../components/Toast/variables");
 const palette_1 = require("./palette");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
@@ -227,23 +227,6 @@ const themeColors = (0, styled_components_1.css) `
   --color-white: #ffffff;
   --color-static-white: #ffffff;
 
-  --color-primary-bg: var(--color-brand-1);
-  --color-primary-bg-hover: var(--color-brand-2);
-  --color-primary-border: var(--color-brand-3);
-  --color-primary-border-hover: var(--color-brand-4);
-  --color-primary-hover: var(--color-brand-8);
-  --color-primary-base: var(--color-brand-6);
-  --color-primary-active: var(--color-brand-7);
-  --color-primary-text-hover: var(--color-brand-9);
-  --color-primary-text: var(--color-brand-8);
-  --color-primary-text-active: var(--color-brand-7);
-  --color-primary-text-on-color: var(--text-color-on-color);
-
-  --color-brand-pink-subtle-bg: var(--color-brand-1);
-  --color-brand-pink-subtle-bg-hover: var(--color-brand-2);
-  --color-brand-pink-subtle-border: var(--color-brand-3);
-  --color-brand-pink-subtle-border-hover: var(--color-brand-4);
-
   --color-success-bg: var(--color-green-1);
   --color-success-bg-hover: var(--color-green-2);
   --color-success-border: var(--color-green-3);
@@ -288,6 +271,18 @@ const themeColors = (0, styled_components_1.css) `
   --color-info-text: var(--color-blue-9);
   --color-info-text-active: var(--color-blue-10);
 
+  --color-primary-bg: var(--color-brand-1); // @presenter Color
+  --color-primary-bg-hover: var(--color-brand-2); // @presenter Color
+  --color-primary-border: var(--color-brand-3); // @presenter Color
+  --color-primary-border-hover: var(--color-brand-4); // @presenter Color
+  --color-primary-hover: var(--color-brand-8); // @presenter Color
+  --color-primary-base: var(--color-brand-6); // @presenter Color
+  --color-primary-active: var(--color-brand-7); // @presenter Color
+  --color-primary-text-hover: var(--color-brand-9); // @presenter Color
+  --color-primary-text: var(--color-brand-8); // @presenter Color
+  --color-primary-text-active: var(--color-brand-7); // @presenter Color
+  --color-primary-text-on-color: var(--text-color-on-color); // @presenter Color
+
   /**
    * @tokens Elevation Colors
    * @presenter Color
@@ -763,24 +758,24 @@ const apiReferenceDocs = (0, styled_components_1.css) `
   --schema-chevron-color: var(--text-color-secondary); // @presenter Color
   --schema-chevron-size: 9px;
 
-  --schema-property-deep-link-icon-color: var(--color-primary-base); // @presenter Color
+  --schema-property-deep-link-icon-color: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --schema-property-deep-link-icon: none;
 
   /**
     * @tokens API Reference Other
     */
 
-  --loading-spinner-color: var(--color-primary-base); // @presenter Color
+  --loading-spinner-color: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --linear-progress-color: var(--color-info-base); // @presenter Color
   --linear-progress-bg-color: var(--color-info-bg); // @presenter Color
 
-  --fab-bg-color: var(--color-primary-base); // @presenter Color
+  --fab-bg-color: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --fab-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
 
-  --fab-bg-color-hover: var(--color-primary-base); // @presenter Color
+  --fab-bg-color-hover: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --fab-box-shadow-hover: var(--bg-raised-shadow); // @presenter Shadow
 
-  --fab-bg-color-active: var(--color-primary-base); // @presenter Color
+  --fab-bg-color-active: var(--color-primary-base, var(--color-blueberry-6)); // @presenter Color
   --fab-box-shadow-active: var(--bg-raised-shadow); // @presenter Shadow
 
   --fab-icon-color: var(--navbar-text-color); // @presenter Color
@@ -1243,6 +1238,13 @@ const replay = (0, styled_components_1.css) `
   --replay-ai-user-message-gradient: linear-gradient(73.52deg, rgba(113, 94, 254, 0.08) 10.13%, rgba(255, 92, 220, 0.08) 87.29%);
 
   --replay-ai-send-button-disabled-border: 1px solid #ffffff33;
+
+  --replay-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --replay-transition-duration: 300ms;
+
+  @media (prefers-reduced-motion: reduce) {
+    --replay-transition-duration: 0s;
+  }
   // @tokens End
 `;
 exports.styles = (0, styled_components_1.css) `
@@ -1258,28 +1260,27 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_19.button}
     ${variables_20.aiAssistantButton}
     ${variables_20.connectMCPButton}
-    ${variables_40.cards}
+    ${variables_39.cards}
     ${variables_8.catalog}
     ${variables_10.catalogClassic}
     ${variables_24.code}
-    ${variables_41.codeWalkthrough}
+    ${variables_40.codeWalkthrough}
     ${docsDropdown}
     ${variables_14.dropdown}
     ${error}
     ${variables_9.filter}
     ${variables_18.footer}
     ${headingsTypography}
-    ${variables_36.httpTag}
+    ${variables_35.httpTag}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_31.lastUpdated}
+    ${variables_30.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_32.logo}
+    ${variables_31.logo}
     ${variables_26.markdown}
     ${variables_28.markdownTabs}
-    ${variables_29.mermaid}
-    ${variables_30.excalidraw}
+    ${variables_29.diagram}
     ${variables_23.menu}
     ${variables_23.mobileMenu}
     ${modal}
@@ -1298,24 +1299,25 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_7.toc}
     ${variables_15.tooltip}
     ${typography}
-    ${variables_35.userMenu}
-    ${variables_37.versionPicker}
+    ${variables_34.userMenu}
+    ${variables_36.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_33.statusCode}
+    ${variables_32.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_34.segmented}
-    ${variables_39.switcher}
+    ${variables_33.segmented}
+    ${variables_38.switcher}
     ${variables_16.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_38.datePicker}
+    ${variables_37.datePicker}
     ${replay}
-    ${variables_42.skipContent}
-    ${variables_43.pageActions}
-    ${variables_44.svgViewer}
+    ${variables_41.skipContent}
+    ${variables_42.pageActions}
+    ${variables_43.svgViewer}
+    ${variables_44.toast}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

package/lib/core/styles/palette.dark.js

@@ -4,20 +4,6 @@ exports.activeBrandPaletteDark = void 0;
 const styled_components_1 = require("styled-components");
 function brandPaletteDark(palette) {
     switch (palette) {
-        case 'default':
-            return (0, styled_components_1.css) `
-        --color-brand-1: var(--color-blueberry-1);
-        --color-brand-2: var(--color-blueberry-2);
-        --color-brand-3: var(--color-blueberry-3);
-        --color-brand-4: var(--color-blueberry-4);
-        --color-brand-5: var(--color-blueberry-5);
-        --color-brand-6: var(--color-blueberry-6);
-        --color-brand-7: var(--color-blueberry-7);
-        --color-brand-8: var(--color-blueberry-8);
-        --color-brand-9: var(--color-blueberry-9);
-        --color-brand-10: var(--color-blueberry-10);
-        --color-brand-11: var(--color-blueberry-11);
-      `;
         case 'slate':
             return (0, styled_components_1.css) `
         --color-brand-1: #2a2b33;
@@ -191,22 +177,21 @@ function brandPaletteDark(palette) {
       `;
         default:
             return (0, styled_components_1.css) `
-        --color-brand-1: #232a61;
-        --color-brand-2: #222d7a;
-        --color-brand-3: #1e2f93;
-        --color-brand-4: #2f46b7;
-        --color-brand-5: #4561db;
-        --color-brand-6: #5f81ff;
-        --color-brand-7: #87a3ff;
-        --color-brand-8: #9fb7ff;
-        --color-brand-9: #bfd0ff;
-        --color-brand-10: #dfe8ff;
-        --color-brand-11: #f0f4ff;
-        --color-brand-subtle-1: #232a6166;
-        --color-brand-subtle-2: #222d7a66;
-        --color-brand-subtle-3: #1e2f9366;
-        --color-brand-subtle-4: #2f46b766;
-        --text-color-on-color: #ffffff;
+        --button-bg-color-primary-hover-legacy: var(--color-blue-5);
+        --button-bg-color-primary-pressed-legacy: var(--color-blue-4);
+
+        --toc-item-text-color-active-legacy: var(--text-color-primary); 
+        --toc-item-border-color-active-legacy: var(--border-color-invers);
+
+        --checkbox-border-color-legacy: var(--border-color-primary);
+        
+        --switch-bg-color-selected-legacy: var(--color-warm-grey-7);
+        --switch-border-color-selected-legacy: var(--color-warm-grey-7);
+
+        --md-tabs-active-tab-bg-color-legacy: var(--bg-color-active);
+
+        --admonition-default-bg-color-legacy: var(--color-warm-grey-3);
+        --admonition-default-border-color-legacy: var(--color-warm-grey-5);
       `;
     }
 }

package/lib/core/styles/palette.js

@@ -4,169 +4,165 @@ exports.activeBrandPaletteLight = void 0;
 const styled_components_1 = require("styled-components");
 function brandPaletteLight(palette) {
     switch (palette) {
-        case 'default':
-            return (0, styled_components_1.css) `
-        --color-brand-1: var(--color-blueberry-1);
-        --color-brand-2: var(--color-blueberry-2);
-        --color-brand-3: var(--color-blueberry-3);
-        --color-brand-4: var(--color-blueberry-4);
-        --color-brand-5: var(--color-blueberry-5);
-        --color-brand-6: var(--color-blueberry-6);
-        --color-brand-7: var(--color-blueberry-7);
-        --color-brand-8: var(--color-blueberry-8);
-        --color-brand-9: var(--color-blueberry-9);
-        --color-brand-10: var(--color-blueberry-10);
-        --color-brand-11: var(--color-blueberry-11);
-      `;
         case 'slate':
             return (0, styled_components_1.css) `
-        --color-brand-1: #ededf2;
-        --color-brand-2: #dcdde5;
-        --color-brand-3: #c4c6d1;
-        --color-brand-4: #9b9ca8;
-        --color-brand-5: #6e6f7a;
-        --color-brand-6: #1a1c21;
-        --color-brand-7: #22242b;
-        --color-brand-8: #2a2b33;
-        --color-brand-9: #3b3c45;
-        --color-brand-10: #555761;
-        --color-brand-11: #6e6f7a;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #ededf2; // @presenter Color
+        --color-brand-2: #dcdde5; // @presenter Color
+        --color-brand-3: #c4c6d1; // @presenter Color
+        --color-brand-4: #9b9ca8; // @presenter Color
+        --color-brand-5: #6e6f7a; // @presenter Color
+        --color-brand-6: #1a1c21; // @presenter Color
+        --color-brand-7: #22242b; // @presenter Color
+        --color-brand-8: #2a2b33; // @presenter Color
+        --color-brand-9: #3b3c45; // @presenter Color
+        --color-brand-10: #555761; // @presenter Color
+        --color-brand-11: #6e6f7a; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
         case 'pink':
             return (0, styled_components_1.css) `
-        --color-brand-1: #ffe8f7;
-        --color-brand-2: #f7bfe2;
-        --color-brand-3: #ef99cf;
-        --color-brand-4: #e677bd;
-        --color-brand-5: #de59ad;
-        --color-brand-6: #d6409f;
-        --color-brand-7: #bb3d8d;
-        --color-brand-8: #a03a7b;
-        --color-brand-9: #853668;
-        --color-brand-10: #6a3055;
-        --color-brand-11: #4f2841;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #ffe8f7; // @presenter Color
+        --color-brand-2: #f7bfe2; // @presenter Color
+        --color-brand-3: #ef99cf; // @presenter Color
+        --color-brand-4: #e677bd; // @presenter Color
+        --color-brand-5: #de59ad; // @presenter Color
+        --color-brand-6: #d6409f; // @presenter Color
+        --color-brand-7: #bb3d8d; // @presenter Color
+        --color-brand-8: #a03a7b; // @presenter Color
+        --color-brand-9: #853668; // @presenter Color
+        --color-brand-10: #6a3055; // @presenter Color
+        --color-brand-11: #4f2841; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
         case 'coral':
             return (0, styled_components_1.css) `
-        --color-brand-1: #ffe8ea;
-        --color-brand-2: #fac5c9;
-        --color-brand-3: #f5a3aa;
-        --color-brand-4: #ef858d;
-        --color-brand-5: #ea6a75;
-        --color-brand-6: #e5535f;
-        --color-brand-7: #c74b55;
-        --color-brand-8: #a9434c;
-        --color-brand-9: #8b3c42;
-        --color-brand-10: #6d3338;
-        --color-brand-11: #4f282b;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #ffe8ea; // @presenter Color
+        --color-brand-2: #fac5c9; // @presenter Color
+        --color-brand-3: #f5a3aa; // @presenter Color
+        --color-brand-4: #ef858d; // @presenter Color
+        --color-brand-5: #ea6a75; // @presenter Color
+        --color-brand-6: #e5535f; // @presenter Color
+        --color-brand-7: #c74b55; // @presenter Color
+        --color-brand-8: #a9434c; // @presenter Color
+        --color-brand-9: #8b3c42; // @presenter Color
+        --color-brand-10: #6d3338; // @presenter Color
+        --color-brand-11: #4f282b; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
         case 'amber':
             return (0, styled_components_1.css) `
-        --color-brand-1: #fff4e8;
-        --color-brand-2: #feddba;
-        --color-brand-3: #fdc78c;
-        --color-brand-4: #fcb261;
-        --color-brand-5: #fb9f3a;
-        --color-brand-6: #fa8d15;
-        --color-brand-7: #d88121;
-        --color-brand-8: #b6732a;
-        --color-brand-9: #93632f;
-        --color-brand-10: #71512e;
-        --color-brand-11: #4f3c28;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #fff4e8; // @presenter Color
+        --color-brand-2: #feddba; // @presenter Color
+        --color-brand-3: #fdc78c; // @presenter Color
+        --color-brand-4: #fcb261; // @presenter Color
+        --color-brand-5: #fb9f3a; // @presenter Color
+        --color-brand-6: #fa8d15; // @presenter Color
+        --color-brand-7: #d88121; // @presenter Color
+        --color-brand-8: #b6732a; // @presenter Color
+        --color-brand-9: #93632f; // @presenter Color
+        --color-brand-10: #71512e; // @presenter Color
+        --color-brand-11: #4f3c28; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
         case 'jade':
             return (0, styled_components_1.css) `
-        --color-brand-1: #e8fff9;
-        --color-brand-2: #b5edde;
-        --color-brand-3: #88dac4;
-        --color-brand-4: #61c8ad;
-        --color-brand-5: #42b597;
-        --color-brand-6: #29a383;
-        --color-brand-7: #2a9277;
-        --color-brand-8: #2b816b;
-        --color-brand-9: #2b715e;
-        --color-brand-10: #2a6052;
-        --color-brand-11: #284f45;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #e8fff9; // @presenter Color
+        --color-brand-2: #b5edde; // @presenter Color
+        --color-brand-3: #88dac4; // @presenter Color
+        --color-brand-4: #61c8ad; // @presenter Color
+        --color-brand-5: #42b597; // @presenter Color
+        --color-brand-6: #29a383; // @presenter Color
+        --color-brand-7: #2a9277; // @presenter Color
+        --color-brand-8: #2b816b; // @presenter Color
+        --color-brand-9: #2b715e; // @presenter Color
+        --color-brand-10: #2a6052; // @presenter Color
+        --color-brand-11: #284f45; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
         case 'cyan':
             return (0, styled_components_1.css) `
-        --color-brand-1: #e8fbff;
-        --color-brand-2: #aee7f4;
-        --color-brand-3: #79d4e9;
-        --color-brand-4: #4ac2dd;
-        --color-brand-5: #22b2d2;
-        --color-brand-6: #00a2c7;
-        --color-brand-7: #0f91af;
-        --color-brand-8: #1b8097;
-        --color-brand-9: #246e7f;
-        --color-brand-10: #285c67;
-        --color-brand-11: #28484f;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #e8fbff; // @presenter Color
+        --color-brand-2: #aee7f4; // @presenter Color
+        --color-brand-3: #79d4e9; // @presenter Color
+        --color-brand-4: #4ac2dd; // @presenter Color
+        --color-brand-5: #22b2d2; // @presenter Color
+        --color-brand-6: #00a2c7; // @presenter Color
+        --color-brand-7: #0f91af; // @presenter Color
+        --color-brand-8: #1b8097; // @presenter Color
+        --color-brand-9: #246e7f; // @presenter Color
+        --color-brand-10: #285c67; // @presenter Color
+        --color-brand-11: #28484f; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
         case 'ocean':
             return (0, styled_components_1.css) `
-        --color-brand-1: #e8f5ff;
-        --color-brand-2: #b6dfff;
-        --color-brand-3: #85caff;
-        --color-brand-4: #56b5ff;
-        --color-brand-5: #29a2ff;
-        --color-brand-6: #0090ff;
-        --color-brand-7: #1384dc;
-        --color-brand-8: #2277b9;
-        --color-brand-9: #2a6795;
-        --color-brand-10: #2d5472;
-        --color-brand-11: #283e4f;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #e8f5ff; // @presenter Color
+        --color-brand-2: #b6dfff; // @presenter Color
+        --color-brand-3: #85caff; // @presenter Color
+        --color-brand-4: #56b5ff; // @presenter Color
+        --color-brand-5: #29a2ff; // @presenter Color
+        --color-brand-6: #0090ff; // @presenter Color
+        --color-brand-7: #1384dc; // @presenter Color
+        --color-brand-8: #2277b9; // @presenter Color
+        --color-brand-9: #2a6795; // @presenter Color
+        --color-brand-10: #2d5472; // @presenter Color
+        --color-brand-11: #283e4f; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
         case 'indigo':
             return (0, styled_components_1.css) `
-        --color-brand-1: #e8edff;
-        --color-brand-2: #b5d7ff;
-        --color-brand-3: #99aef1;
-        --color-brand-4: #7691eb;
-        --color-brand-5: #5879e4;
-        --color-brand-6: #3e63dd;
-        --color-brand-7: #3c5bc1;
-        --color-brand-8: #3952a4;
-        --color-brand-9: #364988;
-        --color-brand-10: #303e6b;
-        --color-brand-11: #28314f;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #e8edff; // @presenter Color
+        --color-brand-2: #b5d7ff; // @presenter Color
+        --color-brand-3: #99aef1; // @presenter Color
+        --color-brand-4: #7691eb; // @presenter Color
+        --color-brand-5: #5879e4; // @presenter Color
+        --color-brand-6: #3e63dd; // @presenter Color
+        --color-brand-7: #3c5bc1; // @presenter Color
+        --color-brand-8: #3952a4; // @presenter Color
+        --color-brand-9: #364988; // @presenter Color
+        --color-brand-10: #303e6b; // @presenter Color
+        --color-brand-11: #28314f; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
         case 'iris':
             return (0, styled_components_1.css) `
-        --color-brand-1: #ebebff;
-        --color-brand-2: #c8c8f7;
-        --color-brand-3: #a7a7ef;
-        --color-brand-4: #8a8ae6;
-        --color-brand-5: #7070de;
-        --color-brand-6: #5b5bd6;
-        --color-brand-7: #5353bb;
-        --color-brand-8: #4c4ca0;
-        --color-brand-9: #434385;
-        --color-brand-10: #3a3a6a;
-        --color-brand-11: #2e2e4f;
-        --text-color-on-color: #ffffff;
+        --color-brand-1: #ebebff; // @presenter Color
+        --color-brand-2: #c8c8f7; // @presenter Color
+        --color-brand-3: #a7a7ef; // @presenter Color
+        --color-brand-4: #8a8ae6; // @presenter Color
+        --color-brand-5: #7070de; // @presenter Color
+        --color-brand-6: #5b5bd6; // @presenter Color
+        --color-brand-7: #5353bb; // @presenter Color
+        --color-brand-8: #4c4ca0; // @presenter Color
+        --color-brand-9: #434385; // @presenter Color
+        --color-brand-10: #3a3a6a; // @presenter Color
+        --color-brand-11: #2e2e4f; // @presenter Color
+        --text-color-on-color: #ffffff; // @presenter Color
       `;
         default:
             return (0, styled_components_1.css) `
-        --color-brand-1: #f0f4ff;
-        --color-brand-2: #dfe8ff;
-        --color-brand-3: #bfd0ff;
-        --color-brand-4: #9fb7ff;
-        --color-brand-5: #87a3ff;
-        --color-brand-6: #5f81ff;
-        --color-brand-7: #4561db;
-        --color-brand-8: #2f46b7;
-        --color-brand-9: #1e2f93;
-        --color-brand-10: #222d7a;
-        --color-brand-11: #232a61;
-        --text-color-on-color: #ffffff;
+        --button-bg-color-primary-legacy: var(--color-blue-6); // @presenter Color
+        --button-bg-color-primary-hover-legacy: var(--color-blue-7); // @presenter Color
+        --button-bg-color-primary-pressed-legacy: var(--color-blue-8); // @presenter Color
+
+        --toc-item-text-color-active-legacy: var(--text-color-primary); // @presenter Color
+        --toc-item-border-color-active-legacy: var(--border-color-invers); // @presenter Color
+
+        --checkbox-border-color-legacy: var(--border-color-primary); // @presenter Color
+        --checkbox-box-color-active-legacy: var(--color-warm-grey-10); // @presenter Color
+
+        --switch-bg-color-selected-legacy: var(--color-warm-grey-9); // @presenter Color
+
+        --md-tabs-active-tab-bg-color-legacy: var(--bg-color-active); // @presenter Color
+        --md-tabs-active-tab-text-color-legacy: var(--text-color-primary); // @presenter Color
+        --md-tabs-active-tab-border-color-legacy: var(--text-color-primary); // @presenter Color
+
+        --admonition-default-bg-color-legacy: var(--color-warm-grey-2); // @presenter Color
+        --admonition-default-icon-color-legacy: var(--color-warm-grey-11); // @presenter Color
+        --admonition-default-border-color-legacy: var(--color-warm-grey-4); // @presenter Color
+
+        --menu-item-bg-color-active-legacy: var(--tree-bg-color-active); // @presenter Color
+        --menu-item-color-active-legacy: var(--tree-content-color-default); // @presenter Color
       `;
     }
 }

package/lib/core/types/hooks.d.ts

@@ -9,7 +9,7 @@ import type { CatalogConfig, ProductUiConfig } from '../../config';
 import type { UseCatalogResponse, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, UseCatalogProps, CatalogApiParams, CatalogApiResults } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
-import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem, ToolCallName, ContentSegment } from './search';
+import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem, ContentSegment, ToolCall } from './search';
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
@@ -101,14 +101,7 @@ export type ThemeHooks = {
         error: null | AiSearchError;
         conversation: AiSearchConversationItem[];
         setConversation: React.Dispatch<React.SetStateAction<AiSearchConversationItem[]>>;
-        toolCalls: Array<{
-            name: ToolCallName;
-            args: unknown;
-            position: number;
-            result?: {
-                documentCount: number;
-            };
-        }>;
+        toolCalls: Array<ToolCall>;
         contentSegments: ContentSegment[];
     };
     useMarkdownText: (text: string) => React.ReactNode;

package/lib/core/types/index.d.ts

@@ -20,3 +20,4 @@ export type * from './page-actions';
 export type * from './open-api-info';
 export type * from './segmented';
 export type * from './tooltip';
+export type * from './toast';