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

package/lib/core/styles/global.js

@@ -46,6 +46,7 @@ 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 variables_45 = require("../../components/PageNavigation/variables");
 const palette_1 = require("./palette");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
@@ -477,8 +478,8 @@ const headingsTypography = (0, styled_components_1.css) `
     * @tokens Typography heading anchor icon
     */
 
-  --heading-anchor-offset-right: 4px; // @presenter Spacing
-  --heading-anchor-color: var(--button-content-color-primary); // @presenter Color
+  --heading-anchor-offset-right: var(--spacing-xs); // @presenter Spacing
+  --heading-anchor-color: var(--icon-color-primary); // @presenter Color
   --heading-anchor-icon: none;
 
   /**
@@ -566,18 +567,19 @@ const links = (0, styled_components_1.css) `
     * @tokens Links
     */
 
-  --link-color-primary: var(--color-blue-6); // @presenter Color
-  --link-decoration: none;
-  --link-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --link-color-primary: var(--link-color-primary-palette, var(--link-color-primary-legacy)); // @presenter Color
+  --link-decoration: underline 1px var(--color-primary-base, var(--link-color-primary-legacy));
+  --link-underline-offset: 4px;
+  --link-font-weight: var(--font-weight-medium); // @presenter FontWeight
 
-  --link-color-primary-hover: var(--color-blue-7); // @presenter Color
-  --link-color-primary-pressed: var(--color-blue-8);
-  --link-decoration-hover: underline;
+  --link-color-primary-hover: var(--link-color-primary-palette, var(--link-color-primary-hover-legacy)); // @presenter Color
+  --link-color-primary-pressed: var(--link-color-primary-palette, var(--link-color-primary-pressed-legacy));
+  --link-decoration-hover: underline 2px var(--color-primary-base, var(--link-color-primary-hover-legacy));
 
   --link-color-inverse: var(--color-blue-5); // @presenter Color
 
-  --link-color-visited: var(--color-purple-7); // @presenter Color
-  --link-visited-decoration: none;
+  --link-color-visited: var(--link-color-primary-palette, var(--link-color-visited-legacy)); // @presenter Color
+  --link-decoration-visited: underline 1px var(--color-primary-base, var(--link-color-visited-legacy));
 
   // @tokens End
 `;
@@ -699,9 +701,10 @@ const apiReferenceDocs = (0, styled_components_1.css) `
     * @tokens API Reference Schema Nested styles
     */
 
-  --schema-nested-offset: calc(var(--spacing-unit) * 2.5); // @presenter Spacing
+  --schema-nested-offset: calc(var(--spacing-sm) - 1px); // @presenter Spacing
   --schema-nested-bg-color: var(--tree-bg-color-active); // @presenter Color
-
+  --schema-nested-hyperlink-offset: 2px; // @presenter Spacing
+  
   /**
     * @tokens API Reference Schema Required styles
     */
@@ -733,7 +736,8 @@ const apiReferenceDocs = (0, styled_components_1.css) `
     * @tokens API Reference Schema Properties
     */
 
-  --schemas-property-name-text-color: var(--text-color-primary); //@presenter Color
+  --schemas-property-name-text-color: var(--color-primary-base, var(--text-color-primary)); //@presenter Color
+  --schemas-property-name-box-text-color: var(--text-color-primary); // @presenter Color
   --schemas-property-name-font-size: var(--font-size-base); // @presenter FontSize
   --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily
   --schemas-property-name-font-weight: var(--font-weight-regular); // @presenter FontWeight
@@ -1319,6 +1323,7 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_42.pageActions}
     ${variables_43.svgViewer}
     ${variables_44.toast}
+    ${variables_45.pageNavigation}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

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

@@ -192,6 +192,12 @@ function brandPaletteDark(palette) {
 
         --admonition-default-bg-color-legacy: var(--color-warm-grey-3);
         --admonition-default-border-color-legacy: var(--color-warm-grey-5);
+
+        --code-block-highlighted-bg-color-legacy: color-mix(in srgb, var(--color-warm-grey-4) 40%, transparent); 
+        
+        --link-color-primary-legacy: var(--color-blue-7);
+        --link-color-primary-hover-legacy: var(--color-blue-8);
+        --link-color-visited-legacy: var(--color-purple-8);
       `;
     }
 }

package/lib/core/styles/palette.js

@@ -18,6 +18,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #555761; // @presenter Color
         --color-brand-11: #6e6f7a; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'pink':
             return (0, styled_components_1.css) `
@@ -33,6 +35,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #6a3055; // @presenter Color
         --color-brand-11: #4f2841; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'coral':
             return (0, styled_components_1.css) `
@@ -48,6 +52,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #6d3338; // @presenter Color
         --color-brand-11: #4f282b; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'amber':
             return (0, styled_components_1.css) `
@@ -63,6 +69,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #71512e; // @presenter Color
         --color-brand-11: #4f3c28; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'jade':
             return (0, styled_components_1.css) `
@@ -78,6 +86,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #2a6052; // @presenter Color
         --color-brand-11: #284f45; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'cyan':
             return (0, styled_components_1.css) `
@@ -93,6 +103,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #285c67; // @presenter Color
         --color-brand-11: #28484f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'ocean':
             return (0, styled_components_1.css) `
@@ -108,6 +120,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #2d5472; // @presenter Color
         --color-brand-11: #283e4f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'indigo':
             return (0, styled_components_1.css) `
@@ -123,6 +137,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #303e6b; // @presenter Color
         --color-brand-11: #28314f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         case 'iris':
             return (0, styled_components_1.css) `
@@ -138,6 +154,8 @@ function brandPaletteLight(palette) {
         --color-brand-10: #3a3a6a; // @presenter Color
         --color-brand-11: #2e2e4f; // @presenter Color
         --text-color-on-color: #ffffff; // @presenter Color
+
+        --link-color-primary-palette: var(--text-color-primary); // @presenter Color
       `;
         default:
             return (0, styled_components_1.css) `
@@ -163,6 +181,27 @@ function brandPaletteLight(palette) {
 
         --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
+        --menu-item-color-active-hover-legacy: var(--tree-content-color-hover); // @presenter Color
+        --menu-item-bg-color-active-hover-legacy: var(--color-hover-base); // @presenter Color
+
+        --code-block-highlighted-bg-color-legacy: var(--layer-color-hover); // @presenter Color
+        --code-block-tokens-string-color-legacy: var(--color-blue-7); // @presenter Color
+
+        --security-header-color-legacy: var(--link-color-primary); // @presenter Color
+
+        --schema-name-color-legacy: var(--text-color-primary); // @presenter Color
+
+        --search-ai-conversation-input-border-color-focus-legacy: var(--color-blue-6); // @presenter Color
+        --search-ai-user-bg-color-legacy: var(--color-blue-6); // @presenter Color
+
+        --button-content-color-link-legacy: var(--link-color-primary); // @presenter Color
+        --button-content-color-link-hover-legacy: var(--link-color-primary-hover); // @presenter Color
+        --button-content-color-link-pressed-legacy: var(--link-color-primary-pressed); // @presenter Color
+
+        --link-color-primary-legacy: var(--color-blue-6); // @presenter Color
+        --link-color-primary-hover-legacy: var(--color-blue-7); // @presenter Color
+        --link-color-primary-pressed-legacy: var(--color-blue-8); // @presenter Color
+        --link-color-visited-legacy: var(--color-purple-7); // @presenter Color
       `;
     }
 }

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

@@ -143,7 +143,7 @@ export type BffCatalogEntity = {
     key: string;
     type: string;
     title: string;
-    readonly source: 'api' | 'file';
+    readonly source: 'remote' | 'file';
     domains?: Array<BffCatalogRelatedEntity>;
     owners?: Array<BffCatalogRelatedEntity>;
     summary?: string | null;

package/lib/icons/LinkIcon/LinkIcon.js

@@ -7,17 +7,17 @@ exports.LinkIcon = 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({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
-    react_1.default.createElement("path", { d: "M14.625 3.37992C14.3463 3.10024 14.0151 2.87833 13.6505 2.72692C13.2858 2.5755 12.8949 2.49756 12.5 2.49756C12.1052 2.49756 11.7142 2.5755 11.3496 2.72692C10.9849 2.87833 10.6537 3.10024 10.375 3.37992L11.085 4.08992C11.2712 3.90378 11.4922 3.75611 11.7354 3.65537C11.9786 3.55463 12.2393 3.50278 12.5025 3.50278C12.7658 3.50278 13.0264 3.55463 13.2697 3.65537C13.5129 3.75611 13.7339 3.90378 13.92 4.08992C14.1062 4.27607 14.2538 4.49706 14.3546 4.74028C14.4553 4.98349 14.5072 5.24417 14.5072 5.50742C14.5072 5.77068 14.4553 6.03135 14.3546 6.27457C14.2538 6.51778 14.1062 6.73878 13.92 6.92492L9.92002 10.9249C9.54473 11.3009 9.03548 11.5123 8.50428 11.5128C7.97309 11.5133 7.46346 11.3027 7.08752 10.9274C6.71157 10.5521 6.5001 10.0429 6.49964 9.51169C6.49917 8.98049 6.70973 8.47087 7.08502 8.09492L7.79002 7.38492L7.08502 6.67492L6.37502 7.38492C6.09534 7.66363 5.87343 7.99481 5.72201 8.35947C5.57059 8.72412 5.49265 9.11508 5.49265 9.50992C5.49265 9.90477 5.57059 10.2957 5.72201 10.6604C5.87343 11.025 6.09534 11.3562 6.37502 11.6349C6.94076 12.1934 7.70505 12.5045 8.50002 12.4999C8.89637 12.5016 9.28913 12.4246 9.65558 12.2736C10.022 12.1225 10.3549 11.9004 10.635 11.6199L14.635 7.61992C15.1955 7.0561 15.5093 6.29286 15.5074 5.49785C15.5055 4.70285 15.1881 3.9411 14.625 3.37992Z" }),
-    react_1.default.createElement("path", { d: "M2.09502 12.4099C1.90831 12.2241 1.76016 12.0032 1.65907 11.7599C1.55798 11.5167 1.50593 11.2559 1.50593 10.9924C1.50593 10.729 1.55798 10.4682 1.65907 10.2249C1.76016 9.98165 1.90831 9.76076 2.09502 9.57492L6.09502 5.57492C6.28085 5.38822 6.50174 5.24007 6.745 5.13898C6.98826 5.03788 7.24909 4.98584 7.51252 4.98584C7.77594 4.98584 8.03677 5.03788 8.28003 5.13898C8.52329 5.24007 8.74418 5.38822 8.93002 5.57492C9.11554 5.76222 9.26158 5.98486 9.35949 6.22963C9.4574 6.47441 9.50519 6.73634 9.50002 6.99992C9.50154 7.26433 9.45062 7.52641 9.35021 7.771C9.2498 8.0156 9.10188 8.23786 8.91502 8.42492L7.85502 9.49992L8.56501 10.2099L9.62502 9.14992C10.1893 8.58568 10.5063 7.82039 10.5063 7.02242C10.5063 6.22446 10.1893 5.45917 9.62502 4.89492C9.06077 4.33068 8.29548 4.01368 7.49752 4.01368C6.69955 4.01368 5.93426 4.33068 5.37002 4.89492L1.37002 8.89492C1.08958 9.17373 0.867037 9.50522 0.715177 9.87033C0.563316 10.2354 0.485138 10.627 0.485138 11.0224C0.485138 11.4179 0.563316 11.8094 0.715177 12.1745C0.867037 12.5396 1.08958 12.8711 1.37002 13.1499C1.93943 13.7042 2.70546 14.0099 3.50002 13.9999C4.30157 14.0007 5.07087 13.6843 5.64002 13.1199L4.93002 12.4099C4.74418 12.5966 4.52329 12.7448 4.28003 12.8459C4.03677 12.947 3.77594 12.999 3.51252 12.999C3.24909 12.999 2.98826 12.947 2.745 12.8459C2.50174 12.7448 2.28085 12.5966 2.09502 12.4099Z" })));
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V16C20 18.2091 18.2091 20 16 20H4C1.79086 20 0 18.2091 0 16V4Z", fill: "var(--layer-color)" }),
+    react_1.default.createElement("path", { d: "M7.37318 9.56229H12.6232C12.7392 9.56229 12.8505 9.60838 12.9325 9.69043C13.0146 9.77247 13.0607 9.88375 13.0607 9.99979C13.0607 10.1158 13.0146 10.2271 12.9325 10.3091C12.8505 10.3912 12.7392 10.4373 12.6232 10.4373H7.37318C7.25714 10.4373 7.14586 10.3912 7.06382 10.3091C6.98177 10.2271 6.93568 10.1158 6.93568 9.99979C6.93568 9.88375 6.98177 9.77247 7.06382 9.69043C7.14586 9.60838 7.25714 9.56229 7.37318 9.56229ZM8.6853 12.1875H6.4978C5.91764 12.1875 5.36124 11.957 4.95101 11.5468C4.54077 11.1366 4.3103 10.5802 4.3103 10C4.3103 9.41984 4.54077 8.86344 4.95101 8.4532C5.36124 8.04297 5.91764 7.8125 6.4978 7.8125H8.6853C8.80133 7.8125 8.91262 7.76641 8.99466 7.68436C9.07671 7.60231 9.1228 7.49103 9.1228 7.375C9.1228 7.25897 9.07671 7.14769 8.99466 7.06564C8.91262 6.98359 8.80133 6.9375 8.6853 6.9375H6.4978C5.68558 6.9375 4.90662 7.26016 4.33229 7.83449C3.75796 8.40882 3.4353 9.18777 3.4353 10C3.4353 10.8122 3.75796 11.5912 4.33229 12.1655C4.90662 12.7398 5.68558 13.0625 6.4978 13.0625H8.6853C8.80133 13.0625 8.91262 13.0164 8.99466 12.9344C9.07671 12.8523 9.1228 12.741 9.1228 12.625C9.1228 12.509 9.07671 12.3977 8.99466 12.3156C8.91262 12.2336 8.80133 12.1875 8.6853 12.1875ZM13.4982 6.9375H11.3107C11.1946 6.9375 11.0834 6.98359 11.0013 7.06564C10.9193 7.14769 10.8732 7.25897 10.8732 7.375C10.8732 7.49103 10.9193 7.60231 11.0013 7.68436C11.0834 7.76641 11.1946 7.8125 11.3107 7.8125H13.4982C14.0783 7.8125 14.6347 8.04297 15.045 8.4532C15.4552 8.86344 15.6857 9.41984 15.6857 10C15.6857 10.5802 15.4552 11.1366 15.045 11.5468C14.6347 11.957 14.0783 12.1875 13.4982 12.1875H11.3107C11.1946 12.1875 11.0834 12.2336 11.0013 12.3156C10.9193 12.3977 10.8732 12.509 10.8732 12.625C10.8732 12.741 10.9193 12.8523 11.0013 12.9344C11.0834 13.0164 11.1946 13.0625 11.3107 13.0625H13.4982C14.3104 13.0625 15.0894 12.7398 15.6637 12.1655C16.238 11.5912 16.5607 10.8122 16.5607 10C16.5607 9.18777 16.238 8.40882 15.6637 7.83449C15.0894 7.26016 14.3104 6.9375 13.4982 6.9375Z", fill: "var(--icon-color-primary)" })));
 exports.LinkIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
     'data-component-name': 'icons/LinkIcon/LinkIcon',
 })) `
-  path {
+  path:last-of-type {
     fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
   }
 
-  height: ${({ size }) => size || '16px'};
-  width: ${({ size }) => size || '16px'};
+  height: ${({ size }) => size || '20px'};
+  width: ${({ size }) => size || '20px'};
 `;
 //# sourceMappingURL=LinkIcon.js.map

package/lib/markdoc/components/Cards/Card.js

@@ -98,6 +98,7 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
   text-decoration: none;
   --md-paragraph-margin: 0;
   --link-decoration-hover: none;
+  --link-decoration: none;
 
   background-color: var(--card-bg-color);
   border-width: var(--card-border-width);

package/lib/markdoc/components/Heading/Heading.js

@@ -76,7 +76,7 @@ function Heading({ level, id, children, 'data-source': dataSource, 'data-hash':
     const pageProps = usePageProps();
     const isMarkdownPage = ((_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _a === void 0 ? void 0 : _a.type) === 'markdown' || ((_b = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _b === void 0 ? void 0 : _b.type) === 'asciidoc';
     const linkEl = (react_1.default.createElement("a", { "aria-label": `link  to ${id}`, href: `#${id}`, className: (0, utils_1.concatClassNames)('anchor', 'before') },
-        react_1.default.createElement(LinkIcon_1.LinkIcon, { size: "14px", color: "--heading-anchor-color" })));
+        react_1.default.createElement(LinkIcon_1.LinkIcon, { color: "--heading-anchor-color" })));
     return (0, react_1.createElement)(`h${level}`, {
         id,
         className: (0, utils_1.concatClassNames)('heading-anchor', mdClassName, className),
@@ -92,6 +92,12 @@ const HeadingContentWrapper = styled_components_1.default.div `
   display: flex;
   gap: var(--spacing-xs);
 
+  & > .anchor {
+    display: flex;
+    align-items: center;
+    height: 1lh;
+  }
+
   & > span {
     display: flex;
     align-items: flex-start;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.65.0-next.1",
+  "version": "0.65.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.11.0-next.1"
+    "@redocly/realm-asyncapi-sdk": "0.11.0-next.2"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",

package/src/components/Banner/Banner.tsx

@@ -138,7 +138,7 @@ export function Banner({ className }: BannerProps): JSX.Element | null {
       $color={displayBanner.color}
       $isVisible={isVisible}
     >
-      <BannerContent>
+      <BannerContent $color={displayBanner.color}>
         <MarkdownLinkContext.Provider value={markdownLinkContextValue}>
           <Markdown compact>{markdownContent}</Markdown>
         </MarkdownLinkContext.Provider>
@@ -159,7 +159,7 @@ export function Banner({ className }: BannerProps): JSX.Element | null {
   );
 }
 
-const BannerContent = styled.div`
+const BannerContent = styled.div<{ $color: DisplayBanner['color'] }>`
   flex: 1;
   display: flex;
   align-items: center;
@@ -172,7 +172,15 @@ const BannerContent = styled.div`
 
     a:not([role='button']) {
       color: var(--banner-link-color);
-      text-decoration: var(--banner-link-decoration);
+      text-decoration: ${({ $color }) => $color && `var(--banner-${$color}-link-decoration)`};
+
+      &:hover, &:focus {
+        text-decoration: ${({ $color }) => $color && `var(--banner-${$color}-link-decoration-hover)`};
+      }
+
+      &:visited {
+        text-decoration: ${({ $color }) => $color && `var(--banner-${$color}-link-decoration)`};
+      }
     }
 
     [data-component-name='Button/Button'] {

package/src/components/Banner/variables.ts

@@ -17,7 +17,6 @@ export const banner = css`
   --banner-button-icon-right-padding: 1px 10px 1px var(--spacing-sm); // @presenter Spacing
   --banner-button-margin: 0 var(--spacing-xs); // @presenter Spacing
   --banner-padding: var(--spacing-xs); // @presenter Spacing
-  --banner-link-decoration: var(--link-decoration-hover);
   --banner-min-height: 38px;
   --banner-gap: var(--spacing-xxs); // @presenter Spacing
 
@@ -25,20 +24,28 @@ export const banner = css`
   --banner-info-text-color: var(--color-static-white); // @presenter Color
   --banner-info-icon-color: var(--color-static-white); // @presenter Color
   --banner-info-link-color: var(--banner-info-text-color); // @presenter Color
+  --banner-info-link-decoration: underline 1px var(--banner-info-link-color);
+  --banner-info-link-decoration-hover: underline 2px var(--banner-info-link-color);
 
   --banner-success-bg-color: var(--color-success-base); // @presenter Color
   --banner-success-text-color: var(--color-static-white); // @presenter Color
   --banner-success-icon-color: var(--color-static-white); // @presenter Color
   --banner-success-link-color: var(--banner-success-text-color); // @presenter Color
+  --banner-success-link-decoration: underline 1px var(--banner-success-link-color);
+  --banner-success-link-decoration-hover: underline 2px var(--banner-success-link-color);
 
   --banner-warning-bg-color: var(--color-warning-base); // @presenter Color
   --banner-warning-text-color: var(--color-black); // @presenter Color
   --banner-warning-icon-color: var(--color-black); // @presenter Color
   --banner-warning-link-color: var(--banner-warning-text-color); // @presenter Color
+  --banner-warning-link-decoration: underline 1px var(--banner-warning-link-color);
+  --banner-warning-link-decoration-hover: underline 2px var(--banner-warning-link-color);
 
   --banner-error-bg-color: var(--color-error-base); // @presenter Color
   --banner-error-text-color: var(--color-static-white); // @presenter Color
   --banner-error-icon-color: var(--color-static-white); // @presenter Color
   --banner-error-link-color: var(--banner-error-text-color); // @presenter Color
+  --banner-error-link-decoration: underline 1px var(--banner-error-link-color);
+  --banner-error-link-decoration-hover: underline 2px var(--banner-error-link-color);
 `;
 

package/src/components/Button/variables.ts

@@ -47,9 +47,9 @@ export const button = css`
   --button-content-color-custom-hover: var(--color-warm-grey-11); // @presenter Color
   --button-bg-color-custom: var(--color-white); // @presenter Color
 
-  --button-content-color-link: var(--link-color-primary);
-  --button-content-color-link-hover: var(--link-color-primary-hover);
-  --button-content-color-link-pressed: var(--link-color-primary-pressed);
+  --button-content-color-link: var(--color-primary-base, var(--button-content-color-link-legacy));
+  --button-content-color-link-hover: var(--color-primary-active, var(--button-content-color-link-hover-legacy));
+  --button-content-color-link-pressed: var(--color-primary-base, var(--button-content-color-link-pressed-legacy));
 
   /**
    * @tokens Button default values

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -47,18 +47,21 @@ const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
   }
 
   .highlighted {
-    background: var(--layer-color-hover);
+    background: var(--code-block-highlighted-bg-color);
     margin-left: calc(var(--spacing-sm) * -1);
     padding-left: var(--spacing-sm);
     width: calc(100% + var(--spacing-sm));
     display: inline-block;
+    border-left: var(--code-block-highlighted-border-left);
 
     &.error {
-      background: var(--color-raspberry-2);
+      background: var(--color-error-bg);
+      border-left: 1px solid var(--color-error-base);
     }
 
     &.warning {
-      background: var(--color-carrot-2);
+      background: var(--color-warning-bg);
+      border-left: 1px solid var(--color-warning-base);
     }
   }
 
@@ -97,18 +100,20 @@ const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
     display: inline-block;
 
     &.add {
-      background: var(--color-grass-2);
+      background: var(--color-success-bg);
+      border-left: 1px solid var(--color-success-base);
       &:before {
         content: attr(data-line-number) ' +';
-        color: var(--color-grass-7);
+        color: var(--color-success-active);
       }
     }
     &.remove {
-      background: var(--color-raspberry-2);
+      background: var(--color-error-bg);
+      border-left: 1px solid var(--color-error-base);
 
       &:before {
         content: attr(data-line-number) ' -';
-        color: var(--color-raspberry-7);
+        color: var(--color-error-active);
       }
     }
   }

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

@@ -0,0 +1,5 @@
+import { css } from 'styled-components';
+
+export const codeBlockDarkMode = css`
+  --code-block-highlighted-bg-color: var(--color-brand-subtle-2, var(--code-block-highlighted-bg-color-legacy)); // @presenter Color
+`;

package/src/components/CodeBlock/variables.ts

@@ -60,6 +60,8 @@ export const code = css`
   --code-block-margin: 0;
   --code-block-max-height: calc(100vh - 300px); // Where 300 is combined value of navbar, code block heading, controls height and paddings
   --code-block-word-break: initial;
+  --code-block-highlighted-border-left: 1px solid var(--color-primary-base, var(--color-warm-grey-11)); // @presenter Color
+  --code-block-highlighted-bg-color: var(--color-primary-bg, var(--code-block-highlighted-bg-color-legacy)); // @presenter Color
 
   /**
     * @tokens Code Block controls
@@ -91,7 +93,7 @@ export const code = css`
   --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-boolean-color: var(--color-green-7); // @presenter Color
-  --code-block-tokens-string-color: var(--color-blue-7); // @presenter Color
+  --code-block-tokens-string-color: var(--color-primary-active, var(--code-block-tokens-string-color-legacy)); // @presenter Color
   --code-block-tokens-property-string-color: var(--color-blue-7); // @presenter Color
   --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color

package/src/components/Markdown/styles/links.ts

@@ -3,12 +3,13 @@ import { css } from 'styled-components';
 export const markdownLinksCss = css`
   a:not([role='button']) {
     text-decoration: var(--link-decoration);
+    text-underline-offset: var(--link-underline-offset);
     color: var(--link-color-primary);
     font-weight: var(--link-font-weight);
 
     &:visited {
       color: var(--link-color-visited);
-      text-decoration: var(--link-visited-decoration);
+      text-decoration: var(--link-decoration-visited);
     }
 
     &:hover,

package/src/components/Menu/MenuItem.tsx

@@ -256,7 +256,7 @@ const MenuItemNestedWrapper = styled.div<{
         (var(--menu-item-label-chevron-size) / 2 - 1px) +
         var(--menu-item-nested-offset) * ${depth})
       `};
-    border: 0.5px solid var(--border-color-primary);
+    border: 0.5px solid var(--menu-item-border-color-hover);
   }
 `;
 
@@ -286,6 +286,18 @@ const MenuItemLabelWrapper = styled.li<{
       ${depth ? 'var(--menu-item-nested-offset) * ' + depth : '0px'}
     )`};
 
+  &:hover {
+    color: var(--menu-item-color-hover);
+    background: var(--menu-item-bg-color-hover);
+
+    ${ChevronDownIcon} path {
+      fill: var(--menu-item-color-hover);
+    }
+    ${ChevronRightIcon} path {
+      fill: var(--menu-item-color-hover);
+    }
+  }
+
   ${({ active, deprecated }) =>
     active &&
     css`
@@ -301,7 +313,8 @@ const MenuItemLabelWrapper = styled.li<{
       }
 
       &:hover {
-        background: var(--menu-item-bg-color-active);
+        color: var(--menu-item-color-active-hover);
+        background: var(--menu-item-bg-color-active-hover);
       }
     `};
 
@@ -315,30 +328,6 @@ const MenuItemLabelWrapper = styled.li<{
       }
     `};
 
-  &:hover {
-    color: var(--menu-item-color-hover);
-    background: var(--menu-item-bg-color-hover);
-
-    ${ChevronDownIcon} path {
-      fill: var(--menu-item-color-hover);
-    }
-    ${ChevronRightIcon} path {
-      fill: var(--menu-item-color-hover);
-    }
-  }
-
-  &:active {
-    color: var(--menu-item-color-active);
-    background: var(--menu-item-bg-color-active);
-
-    ${ChevronDownIcon} path {
-      fill: var(--menu-item-color-active);
-    }
-    ${ChevronRightIcon} path {
-      fill: var(--menu-item-color-active);
-    }
-  }
-
   &:empty {
     padding: 0;
   }

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

@@ -7,4 +7,6 @@ export const menuDarkMode = css`
   --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
+
+  --menu-item-border-color-hover: color-mix(in srgb, var(--color-black) 8%, transparent); // @presenter Color
 `;

package/src/components/Menu/variables.ts

@@ -33,7 +33,9 @@ export const menu = css`
 
   --menu-item-color-hover: var(--tree-content-color-hover); // @presenter Color
   --menu-item-color-active: var(--color-primary-text, var(--menu-item-color-active-legacy)); // @presenter Color
-  
+  --menu-item-color-active-hover: var(--color-primary-text, var(--menu-item-color-active-hover-legacy)); // @presenter Color
+  --menu-item-bg-color-active-hover: var(--color-primary-bg, var(--menu-item-bg-color-active-hover-legacy)); // @presenter Color
+  --menu-item-border-color-hover: color-mix(in srgb, var(--color-warm-grey-11) 6%, transparent); // @presenter Color
   /**
    * @tokens Menu item spacing
    * @presenter Spacing

package/src/components/PageActions/PageActions.tsx

@@ -120,6 +120,7 @@ const PageActionsWrapper = styled.div`
 
 const LinkMenuItem = styled(Link)`
   text-decoration: none;
+  --link-decoration: none;
   --link-decoration-hover: none;
 `;
 

package/src/components/PageNavigation/NavigationButton.tsx

@@ -4,8 +4,8 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
-import { Button } from '@redocly/theme/components/Button/Button';
 import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
+import { Button } from '@redocly/theme/components/Button/Button';
 
 type NavigationButtonPosition = 'left' | 'right';
 
@@ -34,35 +34,37 @@ export function NavigationButton({
       data-translation-key={translationKey}
       position={position}
     >
-      <NavigationButtonLabel>{text}</NavigationButtonLabel>
-      <StyledNavigationButton
-        size="large"
-        to={link}
-        extraClass={className}
-        variant="link"
-        icon={icon}
-        iconPosition={position}
-      >
-        {label}
-      </StyledNavigationButton>
+      <PageNavigationTitle>{label}</PageNavigationTitle>
+      <Button to={link} extraClass={className} variant="link" icon={icon} iconPosition={position}>
+        {text}
+      </Button>
     </NavigationButtonWrapper>
   );
 }
 
-const NavigationButtonWrapper = styled.div<{ position: NavigationButtonPosition }>`
+const NavigationButtonWrapper = styled.div<{
+  position: NavigationButtonPosition;
+}>`
   display: flex;
   flex-direction: column;
+  width: var(--page-navigation-button-width);
   text-align: ${({ position }) => position};
-`;
+  padding: var(--page-navigation-button-padding);
+  gap: var(--page-navigation-button-gap);
+  border: var(--page-navigation-button-border);
+  border-radius: var(--page-navigation-button-border-radius);
+  min-width: var(--page-navigation-button-min-width);
 
-const StyledNavigationButton = styled(Button)`
-  text-wrap: wrap;
-  padding-left: 0;
-  padding-right: 0;
+  &:hover {
+    border: var(--page-navigation-button-border-hover);
+  }
 `;
 
-const NavigationButtonLabel = styled.span`
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  font-weight: var(--font-weight-regular);
+const PageNavigationTitle = styled.p`
+  font-size: var(--page-navigation-button-title-font-size);
+  font-weight: var(--page-navigation-button-title-font-weight);
+  line-height: var(--page-navigation-button-title-line-height);
+  color: var(--page-navigation-button-title-color);
+  text-wrap: wrap;
+  margin: 0;
 `;