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

package/lib/icons/CheckboxIcon/CheckboxIcon.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Icon = ({ className, checked = false, onClick, }) => (react_1.default.createElement("span", { className: className, onClick: onClick }, checked ? (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z", fill: "var(--checkbox-box-color-active)" }),
-    react_1.default.createElement("path", { d: "M3.91308 7.03516H3.91326C3.99256 7.03525 4.07081 7.05331 4.14213 7.08798C4.21341 7.12262 4.27591 7.17295 4.32497 7.2352L3.91308 7.03516ZM3.91308 7.03516H3.09394C2.89031 7.03516 2.7766 7.26975 2.90232 7.4292L2.90237 7.42927L6.11214 11.4957L6.11218 11.4957C6.32247 11.7619 6.72568 11.7611 6.93667 11.4962L6.93708 11.4957L12.6597 4.24398C12.6598 4.24378 12.66 4.24358 12.6602 4.24338C12.7884 4.08295 12.6699 3.85 12.4689 3.85H11.6498C11.4894 3.85 11.3367 3.9235 11.2376 4.05044C11.2375 4.05055 11.2374 4.05066 11.2373 4.05077L6.52403 10.0216M3.91308 7.03516L6.52403 10.0216M6.52403 10.0216L4.32506 7.23531L6.52403 10.0216Z", fill: "var(--checkbox-content-color-inverse)", stroke: "var(--checkbox-content-color-inverse)" }))) : (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "var(--checkbox-box-color)", xmlns: "http://www.w3.org/2000/svg" },
-    react_1.default.createElement("rect", { x: "0.5", y: "0.5", width: "15", height: "15", rx: "3.5", stroke: "var(--checkbox-border-color)" })))));
+const Icon = ({ className, checked = false, onClick, }) => (react_1.default.createElement("span", { className: className, onClick: onClick }, checked ? (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H10C12.2091 0 14 1.79086 14 4V10C14 12.2091 12.2091 14 10 14H4C1.79086 14 0 12.2091 0 10V4Z", fill: "var(--checkbox-content-color-inverse)" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 1H4C2.34315 1 1 2.34315 1 4V10C1 11.6569 2.34315 13 4 13H10C11.6569 13 13 11.6569 13 10V4C13 2.34315 11.6569 1 10 1ZM4 0C1.79086 0 0 1.79086 0 4V10C0 12.2091 1.79086 14 4 14H10C12.2091 14 14 12.2091 14 10V4C14 1.79086 12.2091 0 10 0H4Z", fill: "var(--checkbox-box-color-active)" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.36018 9.98574L10.9106 4.21938C11.0343 4.06448 10.9203 3.83984 10.7272 3.83984H10.0758C9.93597 3.83984 9.80268 3.90389 9.71608 4.01474L9.03424 4.8785L5.99975 8.72257L4.28308 6.54742C4.24025 6.49305 4.18567 6.44909 4.12342 6.41883C4.06118 6.38858 3.99269 6.37282 3.92348 6.37273H3.27208C3.07619 6.37273 2.96673 6.59854 3.08778 6.75208L5.64029 9.98581C5.82388 10.2182 6.17616 10.2168 6.36018 9.98574Z", fill: "var(--checkbox-box-color-active)" }))) : (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "var(--checkbox-box-color)", xmlns: "http://www.w3.org/2000/svg" },
+    react_1.default.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H10C12.2091 0 14 1.79086 14 4V10C14 12.2091 12.2091 14 10 14H4C1.79086 14 0 12.2091 0 10V4Z", fill: "var(--checkbox-content-color-inverse)" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 1H4C2.34315 1 1 2.34315 1 4V10C1 11.6569 2.34315 13 4 13H10C11.6569 13 13 11.6569 13 10V4C13 2.34315 11.6569 1 10 1ZM4 0C1.79086 0 0 1.79086 0 4V10C0 12.2091 1.79086 14 4 14H10C12.2091 14 14 12.2091 14 10V4C14 1.79086 12.2091 0 10 0H4Z", fill: "var(--checkbox-border-color)" })))));
 exports.CheckboxIcon = (0, styled_components_1.default)(Icon).attrs({
     'data-component-name': 'icons/CheckboxIcon/CheckboxIcon',
 }) `

package/lib/icons/CheckboxIcon/variables.dark.js

@@ -5,6 +5,7 @@ const styled_components_1 = require("styled-components");
 exports.checkboxDarkMode = (0, styled_components_1.css) `
   --checkbox-box-color-disabled: var(--color-warm-grey-3);
   --checkbox-border-color-disabled: var(--border-color-primary);
-  --checkbox-content-color-inverse: var(--color-warm-grey-1);
+  --checkbox-content-color-inverse: transparent;
+  --checkbox-border-color: var(--color-brand-subtle-border, var(--checkbox-border-color-legacy));
 `;
 //# sourceMappingURL=variables.dark.js.map

package/lib/icons/CheckboxIcon/variables.js

@@ -9,14 +9,14 @@ exports.checkbox = (0, styled_components_1.css) `
   --checkbox-content-color-disabled: var(--text-color-disabled);
 
   --checkbox-box-color: transparent;
-  --checkbox-box-color-active: var(--color-warm-grey-10);
+  --checkbox-box-color-active: var(--color-primary-base, var(--checkbox-box-color-active-legacy));
   --checkbox-box-color-focused: var(--color-warm-grey-9);
   --checkbox-box-color-disabled: var(--color-warm-grey-1);
 
-  --checkbox-border-color: var(--border-color-primary);
+  --checkbox-border-color: var(--color-primary-border, var(--checkbox-border-color-legacy));
   --checkbox-border-color-active: var(--color-warm-grey-8);
   --checkbox-border-color-disabled: var(--border-color-secondary);
 
-  --checkbox-content-color-inverse: var(--color-white);
+  --checkbox-content-color-inverse: transparent;
 `;
 //# sourceMappingURL=variables.js.map

package/lib/icons/IdeaIcon/IdeaIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const IdeaIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/IdeaIcon/IdeaIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IdeaIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "12", height: "16", viewBox: "0 0 12 16", fill: "none" }, props),
+    react_1.default.createElement("path", { d: "M8.44309 12.375H2.81809V13.5H8.44309V12.375Z" }),
+    react_1.default.createElement("path", { d: "M7.31809 14.625H3.94309V15.75H7.31809V14.625Z" }),
+    react_1.default.createElement("path", { d: "M5.63059 0C4.13874 0 2.708 0.592632 1.65311 1.64752C0.59822 2.70242 0.00558778 4.13316 0.00558778 5.625C-0.0324517 6.4425 0.124148 7.25735 0.462504 8.00252C0.80086 8.74768 1.3113 9.40187 1.95184 9.91125C2.51434 10.4344 2.81809 10.7325 2.81809 11.25H3.94309C3.94309 10.215 3.31871 9.63562 2.71121 9.07875C2.18548 8.67615 1.76648 8.15078 1.49091 7.54866C1.21535 6.94654 1.09163 6.28603 1.13059 5.625C1.13059 4.43153 1.60469 3.28693 2.44861 2.44302C3.29252 1.59911 4.43711 1.125 5.63059 1.125C6.82406 1.125 7.96865 1.59911 8.81257 2.44302C9.65648 3.28693 10.1306 4.43153 10.1306 5.625C10.1689 6.28652 10.0443 6.94734 9.76775 7.5495C9.49119 8.15166 9.0711 8.67676 8.54434 9.07875C7.94246 9.64125 7.31809 10.2037 7.31809 11.25H8.44309C8.44309 10.7325 8.74121 10.4344 9.30934 9.90563C9.94943 9.39711 10.4596 8.74389 10.798 7.99971C11.1364 7.25552 11.2932 6.44163 11.2556 5.625C11.2556 4.88631 11.1101 4.15486 10.8274 3.47241C10.5447 2.78995 10.1304 2.16985 9.60806 1.64752C9.08573 1.12519 8.46564 0.71086 7.78318 0.428178C7.10073 0.145495 6.36927 0 5.63059 0Z" })));
+exports.IdeaIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/IdeaIcon/IdeaIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=IdeaIcon.js.map

package/lib/icons/NewChatIcon/NewChatIcon.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+declare function Icon(props: IconProps): React.JSX.Element;
+export declare const NewChatIcon: import("styled-components").StyledComponent<typeof Icon, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;
+export {};

package/lib/icons/NewChatIcon/NewChatIcon.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewChatIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+function Icon(props) {
+    return (react_1.default.createElement("svg", Object.assign({ width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M11.375 11.375H2.625V2.625H7V1.75H2.625C2.39301 1.75023 2.17058 1.84249 2.00654 2.00654C1.84249 2.17058 1.75023 2.39301 1.75 2.625V11.375C1.75023 11.607 1.84249 11.8294 2.00654 11.9935C2.17058 12.1575 2.39301 12.2498 2.625 12.25H11.375C11.607 12.2498 11.8294 12.1575 11.9935 11.9935C12.1575 11.8294 12.2498 11.607 12.25 11.375V7H11.375V11.375Z" }),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M11.375 2.625V0.875H10.5V2.625H8.75V3.5H10.5V5.25H11.375V3.5H13.125V2.625H11.375Z" })));
+}
+exports.NewChatIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/NewChatIcon/NewChatIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size = '14px' }) => size};
+  width: ${({ size = '14px' }) => size};
+`;
+//# sourceMappingURL=NewChatIcon.js.map

package/lib/index.d.ts

@@ -17,6 +17,8 @@ export * from './components/Loaders/Loading';
 export * from './components/LoadMore/LoadMore';
 export * from './components/Link/Link';
 export * from './components/Portal/Portal';
+export * from './components/Toast/Toast';
+export * from './core/contexts/Toast/ToastProvider';
 export * from './components/Segmented/Segmented';
 export * from './components/LanguagePicker/LanguagePicker';
 export * from './components/Tooltip/Tooltip';
@@ -271,6 +273,8 @@ export * from './icons/ShareIcon/ShareIcon';
 export * from './icons/HashtagIcon/HashtagIcon';
 export * from './icons/FitToViewIcon/FitToViewIcon';
 export * from './icons/ColorPaletteIcon/ColorPaletteIcon';
+export * from './icons/IdeaIcon/IdeaIcon';
+export * from './icons/NewChatIcon/NewChatIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -56,6 +56,8 @@ __exportStar(require("./components/Loaders/Loading"), exports);
 __exportStar(require("./components/LoadMore/LoadMore"), exports);
 __exportStar(require("./components/Link/Link"), exports);
 __exportStar(require("./components/Portal/Portal"), exports);
+__exportStar(require("./components/Toast/Toast"), exports);
+__exportStar(require("./core/contexts/Toast/ToastProvider"), exports);
 __exportStar(require("./components/Segmented/Segmented"), exports);
 __exportStar(require("./components/LanguagePicker/LanguagePicker"), exports);
 __exportStar(require("./components/Tooltip/Tooltip"), exports);
@@ -334,6 +336,8 @@ __exportStar(require("./icons/ShareIcon/ShareIcon"), exports);
 __exportStar(require("./icons/HashtagIcon/HashtagIcon"), exports);
 __exportStar(require("./icons/FitToViewIcon/FitToViewIcon"), exports);
 __exportStar(require("./icons/ColorPaletteIcon/ColorPaletteIcon"), exports);
+__exportStar(require("./icons/IdeaIcon/IdeaIcon"), exports);
+__exportStar(require("./icons/NewChatIcon/NewChatIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/lib/markdoc/components/Mermaid/Mermaid.js

@@ -81,8 +81,6 @@ const Wrapper = styled_components_1.default.div `
   }
 `;
 const ViewerContent = styled_components_1.default.div `
-  background-color: var(--mermaid-bg-color);
-
   * {
     font-family: var(--mermaid-font-family) !important;
   }

package/lib/markdoc/components/Tabs/variables.js

@@ -54,11 +54,11 @@ exports.markdownTabs = (0, styled_components_1.css) `
   --md-tabs-small-tab-line-height: var(--line-height-base); // @presenter LineHeight
   --md-tabs-small-tab-border-radius: var(--border-radius); // @presenter BorderRadius
 
-  --md-tabs-active-tab-text-color: var(--text-color-primary); // @presenter Color
+  --md-tabs-active-tab-text-color: var(--color-primary-text, var(--md-tabs-active-tab-text-color-legacy)); // @presenter Color
   --md-tabs-active-tab-font-family: var(--md-tabs-tab-font-family); // @presenter FontFamily
   --md-tabs-active-tab-font-style: normal; // @presenter FontStyle
-  --md-tabs-active-tab-bg-color: var(--bg-color-active); // @presenter Color
-  --md-tabs-active-tab-border-color: var(--text-color-primary); // @presenter Color
+  --md-tabs-active-tab-bg-color: var(--color-primary-bg, var(--md-tabs-active-tab-bg-color-legacy)); // @presenter Color
+  --md-tabs-active-tab-border-color: var(--color-primary-active, var(--md-tabs-active-tab-border-color-legacy)); // @presenter Color
 
   --md-tabs-medium-active-tab-font-size: var(--md-tabs-medium-tab-font-size); // @presenter FontSize
   --md-tabs-medium-active-tab-font-weight: var(--md-tabs-medium-tab-font-weight); // @presenter FontWeight

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

@@ -3,7 +3,6 @@ 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/HtmlBlock/HtmlBlock';
 export * from '../../markdoc/components/Tabs/Tab';
 export * from '../../markdoc/components/Tabs/TabList';

package/lib/markdoc/components/default.js

@@ -19,7 +19,6 @@ __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/HtmlBlock/HtmlBlock"), exports);
 __exportStar(require("../../markdoc/components/Tabs/Tab"), exports);
 __exportStar(require("../../markdoc/components/Tabs/TabList"), exports);

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.64.0-next.2",
+  "version": "0.64.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -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.0"
   },
   "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/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/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/SvgViewer/variables.dark.ts

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
 
 export const svgViewerDarkMode = css`
-  --svg-viewer-bg-color: var(--color-warm-grey-3);
+  --svg-viewer-bg-color: var(--color-warm-grey-9);
 `;

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