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

package/lib/core/styles/dark.js

@@ -65,7 +65,6 @@ const numberedListDarkMode = (0, styled_components_1.css) `
     */
 
   --md-numbered-list-marker-bg-color: var(--color-warm-grey-3); // @presenter Color
-  --md-numbered-list-marker-bg-color-hover: var(--color-warm-grey-4); // @presenter Color
 
   // @tokens End
 `;

package/lib/index.d.ts

@@ -289,6 +289,7 @@ export * from './icons/ColorPaletteIcon/ColorPaletteIcon';
 export * from './icons/IdeaIcon/IdeaIcon';
 export * from './icons/NewChatIcon/NewChatIcon';
 export * from './layouts/RootLayout';
+export * from './layouts/CustomContexts';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';
 export * from './layouts/Forbidden';

package/lib/index.js

@@ -354,6 +354,7 @@ __exportStar(require("./icons/IdeaIcon/IdeaIcon"), exports);
 __exportStar(require("./icons/NewChatIcon/NewChatIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
+__exportStar(require("./layouts/CustomContexts"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);
 __exportStar(require("./layouts/NotFound"), exports);
 __exportStar(require("./layouts/Forbidden"), exports);

package/lib/layouts/CustomContexts.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { JSX } from 'react';
+type CustomContextsProps = React.PropsWithChildren<{}>;
+export declare function CustomContexts({ children }: CustomContextsProps): JSX.Element;
+export {};

package/lib/layouts/CustomContexts.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomContexts = CustomContexts;
+const react_1 = __importDefault(require("react"));
+// Eject this component to wrap every page in custom React context providers.
+function CustomContexts({ children }) {
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+}
+//# sourceMappingURL=CustomContexts.js.map

package/lib/layouts/RootLayout.js

@@ -10,14 +10,16 @@ const Footer_1 = require("../components/Footer/Footer");
 const SkipContent_1 = require("../components/SkipContent/SkipContent");
 const AIAssistantButton_1 = require("../components/Buttons/AIAssistantButton");
 const hooks_1 = require("../core/hooks");
+const CustomContexts_1 = require("../layouts/CustomContexts");
 function RootLayout({ children }) {
     const { useSearchFeatures } = (0, hooks_1.useThemeHooks)();
     const { askAi } = useSearchFeatures();
     return (react_1.default.createElement("div", { "data-component-name": "layouts/RootLayout" },
-        react_1.default.createElement(SkipContent_1.SkipContent, null),
-        react_1.default.createElement(Navbar_1.Navbar, null),
-        children,
-        react_1.default.createElement(Footer_1.Footer, null),
-        askAi && react_1.default.createElement(AIAssistantButton_1.AIAssistantButton, null)));
+        react_1.default.createElement(CustomContexts_1.CustomContexts, null,
+            react_1.default.createElement(SkipContent_1.SkipContent, null),
+            react_1.default.createElement(Navbar_1.Navbar, null),
+            children,
+            react_1.default.createElement(Footer_1.Footer, null),
+            askAi && react_1.default.createElement(AIAssistantButton_1.AIAssistantButton, null))));
 }
 //# sourceMappingURL=RootLayout.js.map

package/lib/markdoc/components/NumberedList/NumberedItem.js

@@ -55,8 +55,8 @@ function NumberedItem({ headline, anchorId, headlineLevel, icon, iconRawContent,
         type === exports.NumberedListType.ICON && (react_1.default.createElement(MarkerContent, { className: "numbered-item-marker-content" },
             react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: icon, rawContent: iconRawContent }))),
         type === exports.NumberedListType.NUMBER && (react_1.default.createElement(MarkerContent, { className: "numbered-item-marker-content" }, index)),
-        anchorId && (react_1.default.createElement(MarkerLink, { className: "numbered-item-marker-link", $isDot: isDot },
-            react_1.default.createElement(MarkerLinkIcon, { "aria-hidden": "true", focusable: "false", color: "--md-numbered-list-marker-text-color" })))));
+        anchorId && (react_1.default.createElement(MarkerLink, { className: "numbered-item-marker-link", "aria-hidden": "true" },
+            react_1.default.createElement(MarkerLinkIcon, { "aria-hidden": "true", focusable: "false", size: "var(--md-numbered-list-marker-link-size)", color: "--md-numbered-list-marker-link-icon-color" })))));
     return (react_1.default.createElement(NumberedItemWrapper, { "data-component-name": "Markdoc/NumberedList/NumberedItem", className: className, id: anchorId, $size: size, $isDot: isDot },
         react_1.default.createElement(MarkerRail, null,
             anchorId ? (react_1.default.createElement("a", Object.assign({ href: `#${anchorId}` }, (headline
@@ -110,24 +110,23 @@ const MarkerContent = styled_components_1.default.span `
   justify-content: center;
 `;
 const MarkerLink = styled_components_1.default.span `
+  position: absolute;
+  inset-inline-end: calc(100% + var(--md-numbered-list-marker-link-gap));
   display: none;
   align-items: center;
   justify-content: center;
 
-  svg {
-    width: var(--icon-width, 16px);
-    height: var(--icon-height, 16px);
+  &::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 100%;
+    width: var(--md-numbered-list-marker-link-gap);
   }
-
-  ${({ $isDot }) => $isDot &&
-    (0, styled_components_1.css) `
-      position: absolute;
-      inset-inline-end: calc(100% + var(--md-numbered-list-dot-link-gap));
-    `}
 `;
 const MarkerLinkIcon = (0, styled_components_1.default)(LinkIcon_1.LinkIcon) `
   path:first-of-type {
-    fill: var(--md-numbered-list-marker-icon-bg-color);
+    fill: var(--md-numbered-list-marker-link-bg-color);
   }
 `;
 const MarkerRail = styled_components_1.default.span `
@@ -199,17 +198,10 @@ const NumberedItemWrapper = styled_components_1.default.li `
     padding-bottom: 0;
   }
 
-  &:hover,
-  &:focus-within {
-    ${Marker} {
-      background-color: ${({ $isDot }) => $isDot ? 'var(--text-color-primary)' : 'var(--md-numbered-list-marker-bg-color-hover)'};
-    }
-
-    a ${Marker}:not([data-dot]) .numbered-item-marker-content {
-      display: none;
-    }
-
-    a ${Marker} .numbered-item-marker-link {
+  &:has(${MarkerRail} a:hover),
+  &:has(${MarkerRail} a:focus-visible),
+  &:has(${NumberedItemHeadline}:hover) {
+    .numbered-item-marker-link {
       display: flex;
     }
   }

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

@@ -11,8 +11,6 @@ exports.markdownNumberedList = (0, styled_components_1.css) `
   --md-numbered-list-gap: var(--spacing-base); // @presenter Spacing
 
   --md-numbered-list-marker-bg-color: var(--color-warm-grey-2); // @presenter Color
-  --md-numbered-list-marker-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
-  --md-numbered-list-marker-icon-bg-color: transparent; // @presenter Color
   --md-numbered-list-marker-text-color: var(--text-color-primary); // @presenter Color
   --md-numbered-list-marker-font-size: var(--font-size-base); // @presenter FontSize
 
@@ -23,7 +21,10 @@ exports.markdownNumberedList = (0, styled_components_1.css) `
   --md-numbered-list-icon-small-size: 12px; // @presenter Spacing
   --md-numbered-list-dot-size: 10px; // @presenter Spacing
   --md-numbered-list-dot-rail-padding-top: 7px; // @presenter Spacing
-  --md-numbered-list-dot-link-gap: 6px; // @presenter Spacing
+  --md-numbered-list-marker-link-gap: 10px; // @presenter Spacing
+  --md-numbered-list-marker-link-size: 20px; // @presenter Spacing
+  --md-numbered-list-marker-link-icon-color: var(--md-numbered-list-marker-text-color); // @presenter Color
+  --md-numbered-list-marker-link-bg-color: var(--bg-color-tonal); // @presenter Color
 
   --md-numbered-list-tail-bg-color: var(--md-numbered-list-marker-bg-color); // @presenter Color
   --md-numbered-list-tail-fade-gradient: linear-gradient(to bottom, var(--md-numbered-list-tail-bg-color), transparent); // @presenter Color

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.71.0-next.2",
+  "version": "0.71.0-next.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/core/styles/dark.ts

@@ -67,7 +67,6 @@ const numberedListDarkMode = css`
     */
 
   --md-numbered-list-marker-bg-color: var(--color-warm-grey-3); // @presenter Color
-  --md-numbered-list-marker-bg-color-hover: var(--color-warm-grey-4); // @presenter Color
 
   // @tokens End
 `

package/src/index.ts

@@ -318,6 +318,7 @@ export * from '@redocly/theme/icons/IdeaIcon/IdeaIcon';
 export * from '@redocly/theme/icons/NewChatIcon/NewChatIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
+export * from '@redocly/theme/layouts/CustomContexts';
 export * from '@redocly/theme/layouts/PageLayout';
 export * from '@redocly/theme/layouts/NotFound';
 export * from '@redocly/theme/layouts/Forbidden';

package/src/layouts/CustomContexts.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import type { JSX } from 'react';
+
+type CustomContextsProps = React.PropsWithChildren<{}>;
+
+// Eject this component to wrap every page in custom React context providers.
+export function CustomContexts({ children }: CustomContextsProps): JSX.Element {
+  return <>{children}</>;
+}

package/src/layouts/RootLayout.tsx

@@ -7,6 +7,7 @@ import { Footer } from '@redocly/theme/components/Footer/Footer';
 import { SkipContent } from '@redocly/theme/components/SkipContent/SkipContent';
 import { AIAssistantButton } from '@redocly/theme/components/Buttons/AIAssistantButton';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CustomContexts } from '@redocly/theme/layouts/CustomContexts';
 
 export type LayoutConfig = {
   children: React.ReactNode;
@@ -18,11 +19,13 @@ export function RootLayout({ children }: LayoutConfig): JSX.Element {
 
   return (
     <div data-component-name="layouts/RootLayout">
-      <SkipContent />
-      <Navbar />
-      {children}
-      <Footer />
-      {askAi && <AIAssistantButton />}
+      <CustomContexts>
+        <SkipContent />
+        <Navbar />
+        {children}
+        <Footer />
+        {askAi && <AIAssistantButton />}
+      </CustomContexts>
     </div>
   );
 }

package/src/markdoc/components/NumberedList/NumberedItem.tsx

@@ -63,11 +63,12 @@ export function NumberedItem({
         <MarkerContent className="numbered-item-marker-content">{index}</MarkerContent>
       )}
       {anchorId && (
-        <MarkerLink className="numbered-item-marker-link" $isDot={isDot}>
+        <MarkerLink className="numbered-item-marker-link" aria-hidden="true">
           <MarkerLinkIcon
             aria-hidden="true"
             focusable="false"
-            color="--md-numbered-list-marker-text-color"
+            size="var(--md-numbered-list-marker-link-size)"
+            color="--md-numbered-list-marker-link-icon-color"
           />
         </MarkerLink>
       )}
@@ -156,27 +157,25 @@ const MarkerContent = styled.span`
   justify-content: center;
 `;
 
-const MarkerLink = styled.span<{ $isDot?: boolean }>`
+const MarkerLink = styled.span`
+  position: absolute;
+  inset-inline-end: calc(100% + var(--md-numbered-list-marker-link-gap));
   display: none;
   align-items: center;
   justify-content: center;
 
-  svg {
-    width: var(--icon-width, 16px);
-    height: var(--icon-height, 16px);
+  &::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 100%;
+    width: var(--md-numbered-list-marker-link-gap);
   }
-
-  ${({ $isDot }) =>
-    $isDot &&
-    css`
-      position: absolute;
-      inset-inline-end: calc(100% + var(--md-numbered-list-dot-link-gap));
-    `}
 `;
 
 const MarkerLinkIcon = styled(LinkIcon)`
   path:first-of-type {
-    fill: var(--md-numbered-list-marker-icon-bg-color);
+    fill: var(--md-numbered-list-marker-link-bg-color);
   }
 `;
 
@@ -256,18 +255,10 @@ const NumberedItemWrapper = styled.li<{ $size?: string; $isDot?: boolean }>`
     padding-bottom: 0;
   }
 
-  &:hover,
-  &:focus-within {
-    ${Marker} {
-      background-color: ${({ $isDot }) =>
-        $isDot ? 'var(--text-color-primary)' : 'var(--md-numbered-list-marker-bg-color-hover)'};
-    }
-
-    a ${Marker}:not([data-dot]) .numbered-item-marker-content {
-      display: none;
-    }
-
-    a ${Marker} .numbered-item-marker-link {
+  &:has(${MarkerRail} a:hover),
+  &:has(${MarkerRail} a:focus-visible),
+  &:has(${NumberedItemHeadline}:hover) {
+    .numbered-item-marker-link {
       display: flex;
     }
   }

package/src/markdoc/components/NumberedList/variables.ts

@@ -9,8 +9,6 @@ export const markdownNumberedList = css`
   --md-numbered-list-gap: var(--spacing-base); // @presenter Spacing
 
   --md-numbered-list-marker-bg-color: var(--color-warm-grey-2); // @presenter Color
-  --md-numbered-list-marker-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
-  --md-numbered-list-marker-icon-bg-color: transparent; // @presenter Color
   --md-numbered-list-marker-text-color: var(--text-color-primary); // @presenter Color
   --md-numbered-list-marker-font-size: var(--font-size-base); // @presenter FontSize
 
@@ -21,7 +19,10 @@ export const markdownNumberedList = css`
   --md-numbered-list-icon-small-size: 12px; // @presenter Spacing
   --md-numbered-list-dot-size: 10px; // @presenter Spacing
   --md-numbered-list-dot-rail-padding-top: 7px; // @presenter Spacing
-  --md-numbered-list-dot-link-gap: 6px; // @presenter Spacing
+  --md-numbered-list-marker-link-gap: 10px; // @presenter Spacing
+  --md-numbered-list-marker-link-size: 20px; // @presenter Spacing
+  --md-numbered-list-marker-link-icon-color: var(--md-numbered-list-marker-text-color); // @presenter Color
+  --md-numbered-list-marker-link-bg-color: var(--bg-color-tonal); // @presenter Color
 
   --md-numbered-list-tail-bg-color: var(--md-numbered-list-marker-bg-color); // @presenter Color
   --md-numbered-list-tail-fade-gradient: linear-gradient(to bottom, var(--md-numbered-list-tail-bg-color), transparent); // @presenter Color