@redocly/theme 0.65.0-next.0 → 0.65.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/lib/components/Button/variables.js +3 -3
  2. package/lib/components/CodeBlock/CodeBlockContainer.js +12 -7
  3. package/lib/components/CodeBlock/variables.dark.d.ts +1 -0
  4. package/lib/components/CodeBlock/variables.dark.js +8 -0
  5. package/lib/components/CodeBlock/variables.js +3 -1
  6. package/lib/components/Menu/MenuItem.js +15 -26
  7. package/lib/components/Menu/variables.dark.js +2 -0
  8. package/lib/components/Menu/variables.js +3 -1
  9. package/lib/components/PageNavigation/NavigationButton.js +19 -11
  10. package/lib/components/PageNavigation/PageNavigation.js +6 -0
  11. package/lib/components/PageNavigation/variables.d.ts +1 -0
  12. package/lib/components/PageNavigation/variables.js +27 -0
  13. package/lib/components/Search/variables.js +2 -2
  14. package/lib/core/hooks/use-modal-scroll-lock.js +21 -10
  15. package/lib/core/hooks/use-page-actions.js +43 -24
  16. package/lib/core/styles/dark.js +2 -0
  17. package/lib/core/styles/global.js +9 -5
  18. package/lib/core/styles/palette.dark.js +2 -0
  19. package/lib/core/styles/palette.js +16 -0
  20. package/lib/core/types/catalog.d.ts +1 -1
  21. package/lib/core/types/l10n.d.ts +1 -1
  22. package/lib/icons/LinkIcon/LinkIcon.js +6 -6
  23. package/lib/markdoc/components/Heading/Heading.js +7 -1
  24. package/package.json +3 -3
  25. package/src/components/Button/variables.ts +3 -3
  26. package/src/components/CodeBlock/CodeBlockContainer.tsx +12 -7
  27. package/src/components/CodeBlock/variables.dark.ts +5 -0
  28. package/src/components/CodeBlock/variables.ts +3 -1
  29. package/src/components/Menu/MenuItem.tsx +15 -26
  30. package/src/components/Menu/variables.dark.ts +2 -0
  31. package/src/components/Menu/variables.ts +3 -1
  32. package/src/components/PageNavigation/NavigationButton.tsx +24 -22
  33. package/src/components/PageNavigation/PageNavigation.tsx +6 -0
  34. package/src/components/PageNavigation/variables.ts +24 -0
  35. package/src/components/Search/variables.ts +2 -2
  36. package/src/core/hooks/use-modal-scroll-lock.ts +30 -14
  37. package/src/core/hooks/use-page-actions.ts +70 -33
  38. package/src/core/styles/dark.ts +2 -0
  39. package/src/core/styles/global.ts +9 -5
  40. package/src/core/styles/palette.dark.ts +2 -0
  41. package/src/core/styles/palette.ts +16 -0
  42. package/src/core/types/catalog.ts +1 -1
  43. package/src/core/types/l10n.ts +9 -0
  44. package/src/icons/LinkIcon/LinkIcon.tsx +19 -6
  45. package/src/markdoc/components/Heading/Heading.tsx +7 -1
@@ -49,9 +49,9 @@ exports.button = (0, styled_components_1.css) `
49
49
  --button-content-color-custom-hover: var(--color-warm-grey-11); // @presenter Color
50
50
  --button-bg-color-custom: var(--color-white); // @presenter Color
51
51
 
52
- --button-content-color-link: var(--link-color-primary);
53
- --button-content-color-link-hover: var(--link-color-primary-hover);
54
- --button-content-color-link-pressed: var(--link-color-primary-pressed);
52
+ --button-content-color-link: var(--color-primary-base, var(--button-content-color-link-legacy));
53
+ --button-content-color-link-hover: var(--color-primary-active, var(--button-content-color-link-hover-legacy));
54
+ --button-content-color-link-pressed: var(--color-primary-base, var(--button-content-color-link-pressed-legacy));
55
55
 
56
56
  /**
57
57
  * @tokens Button default values
@@ -64,18 +64,21 @@ const CodeBlockContainerComponent = styled_components_1.default.pre `
64
64
  }
65
65
 
66
66
  .highlighted {
67
- background: var(--layer-color-hover);
67
+ background: var(--code-block-highlighted-bg-color);
68
68
  margin-left: calc(var(--spacing-sm) * -1);
69
69
  padding-left: var(--spacing-sm);
70
70
  width: calc(100% + var(--spacing-sm));
71
71
  display: inline-block;
72
+ border-left: var(--code-block-highlighted-border-left);
72
73
 
73
74
  &.error {
74
- background: var(--color-raspberry-2);
75
+ background: var(--color-error-bg);
76
+ border-left: 1px solid var(--color-error-base);
75
77
  }
76
78
 
77
79
  &.warning {
78
- background: var(--color-carrot-2);
80
+ background: var(--color-warning-bg);
81
+ border-left: 1px solid var(--color-warning-base);
79
82
  }
80
83
  }
81
84
 
@@ -114,18 +117,20 @@ const CodeBlockContainerComponent = styled_components_1.default.pre `
114
117
  display: inline-block;
115
118
 
116
119
  &.add {
117
- background: var(--color-grass-2);
120
+ background: var(--color-success-bg);
121
+ border-left: 1px solid var(--color-success-base);
118
122
  &:before {
119
123
  content: attr(data-line-number) ' +';
120
- color: var(--color-grass-7);
124
+ color: var(--color-success-active);
121
125
  }
122
126
  }
123
127
  &.remove {
124
- background: var(--color-raspberry-2);
128
+ background: var(--color-error-bg);
129
+ border-left: 1px solid var(--color-error-base);
125
130
 
126
131
  &:before {
127
132
  content: attr(data-line-number) ' -';
128
- color: var(--color-raspberry-7);
133
+ color: var(--color-error-active);
129
134
  }
130
135
  }
131
136
  }
@@ -0,0 +1 @@
1
+ export declare const codeBlockDarkMode: import("styled-components").FlattenSimpleInterpolation;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.codeBlockDarkMode = void 0;
4
+ const styled_components_1 = require("styled-components");
5
+ exports.codeBlockDarkMode = (0, styled_components_1.css) `
6
+ --code-block-highlighted-bg-color: var(--color-brand-subtle-2, var(--code-block-highlighted-bg-color-legacy)); // @presenter Color
7
+ `;
8
+ //# sourceMappingURL=variables.dark.js.map
@@ -62,6 +62,8 @@ exports.code = (0, styled_components_1.css) `
62
62
  --code-block-margin: 0;
63
63
  --code-block-max-height: calc(100vh - 300px); // Where 300 is combined value of navbar, code block heading, controls height and paddings
64
64
  --code-block-word-break: initial;
65
+ --code-block-highlighted-border-left: 1px solid var(--color-primary-base, var(--color-warm-grey-11)); // @presenter Color
66
+ --code-block-highlighted-bg-color: var(--color-primary-bg, var(--code-block-highlighted-bg-color-legacy)); // @presenter Color
65
67
 
66
68
  /**
67
69
  * @tokens Code Block controls
@@ -93,7 +95,7 @@ exports.code = (0, styled_components_1.css) `
93
95
  --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
94
96
  --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
95
97
  --code-block-tokens-boolean-color: var(--color-green-7); // @presenter Color
96
- --code-block-tokens-string-color: var(--color-blue-7); // @presenter Color
98
+ --code-block-tokens-string-color: var(--color-primary-active, var(--code-block-tokens-string-color-legacy)); // @presenter Color
97
99
  --code-block-tokens-property-string-color: var(--color-blue-7); // @presenter Color
98
100
  --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
99
101
  --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
@@ -174,7 +174,7 @@ const MenuItemNestedWrapper = styled_components_1.default.div `
174
174
  (var(--menu-item-label-chevron-size) / 2 - 1px) +
175
175
  var(--menu-item-nested-offset) * ${depth})
176
176
  `};
177
- border: 0.5px solid var(--border-color-primary);
177
+ border: 0.5px solid var(--menu-item-border-color-hover);
178
178
  }
179
179
  `;
180
180
  const MenuItemLabelWrapper = styled_components_1.default.li `
@@ -196,6 +196,18 @@ const MenuItemLabelWrapper = styled_components_1.default.li `
196
196
  ${depth ? 'var(--menu-item-nested-offset) * ' + depth : '0px'}
197
197
  )`};
198
198
 
199
+ &:hover {
200
+ color: var(--menu-item-color-hover);
201
+ background: var(--menu-item-bg-color-hover);
202
+
203
+ ${ChevronDownIcon_1.ChevronDownIcon} path {
204
+ fill: var(--menu-item-color-hover);
205
+ }
206
+ ${ChevronRightIcon_1.ChevronRightIcon} path {
207
+ fill: var(--menu-item-color-hover);
208
+ }
209
+ }
210
+
199
211
  ${({ active, deprecated }) => active &&
200
212
  (0, styled_components_1.css) `
201
213
  color: ${deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
@@ -210,7 +222,8 @@ const MenuItemLabelWrapper = styled_components_1.default.li `
210
222
  }
211
223
 
212
224
  &:hover {
213
- background: var(--menu-item-bg-color-active);
225
+ color: var(--menu-item-color-active-hover);
226
+ background: var(--menu-item-bg-color-active-hover);
214
227
  }
215
228
  `};
216
229
 
@@ -223,30 +236,6 @@ const MenuItemLabelWrapper = styled_components_1.default.li `
223
236
  }
224
237
  `};
225
238
 
226
- &:hover {
227
- color: var(--menu-item-color-hover);
228
- background: var(--menu-item-bg-color-hover);
229
-
230
- ${ChevronDownIcon_1.ChevronDownIcon} path {
231
- fill: var(--menu-item-color-hover);
232
- }
233
- ${ChevronRightIcon_1.ChevronRightIcon} path {
234
- fill: var(--menu-item-color-hover);
235
- }
236
- }
237
-
238
- &:active {
239
- color: var(--menu-item-color-active);
240
- background: var(--menu-item-bg-color-active);
241
-
242
- ${ChevronDownIcon_1.ChevronDownIcon} path {
243
- fill: var(--menu-item-color-active);
244
- }
245
- ${ChevronRightIcon_1.ChevronRightIcon} path {
246
- fill: var(--menu-item-color-active);
247
- }
248
- }
249
-
250
239
  &:empty {
251
240
  padding: 0;
252
241
  }
@@ -9,5 +9,7 @@ exports.menuDarkMode = (0, styled_components_1.css) `
9
9
  --menu-content-color-disabled: var(--text-color-disabled); // @presenter Color
10
10
 
11
11
  --menu-item-bg-color-active: var(--color-primary-bg, var(--menu-item-bg-color-active-legacy)); // @presenter Color
12
+
13
+ --menu-item-border-color-hover: color-mix(in srgb, var(--color-black) 8%, transparent); // @presenter Color
12
14
  `;
13
15
  //# sourceMappingURL=variables.dark.js.map
@@ -35,7 +35,9 @@ exports.menu = (0, styled_components_1.css) `
35
35
 
36
36
  --menu-item-color-hover: var(--tree-content-color-hover); // @presenter Color
37
37
  --menu-item-color-active: var(--color-primary-text, var(--menu-item-color-active-legacy)); // @presenter Color
38
-
38
+ --menu-item-color-active-hover: var(--color-primary-text, var(--menu-item-color-active-hover-legacy)); // @presenter Color
39
+ --menu-item-bg-color-active-hover: var(--color-primary-bg, var(--menu-item-bg-color-active-hover-legacy)); // @presenter Color
40
+ --menu-item-border-color-hover: color-mix(in srgb, var(--color-warm-grey-11) 6%, transparent); // @presenter Color
39
41
  /**
40
42
  * @tokens Menu item spacing
41
43
  * @presenter Spacing
@@ -7,26 +7,34 @@ exports.NavigationButton = NavigationButton;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const styled_components_1 = __importDefault(require("styled-components"));
9
9
  const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
10
- const Button_1 = require("../../components/Button/Button");
11
10
  const ArrowLeftIcon_1 = require("../../icons/ArrowLeftIcon/ArrowLeftIcon");
11
+ const Button_1 = require("../../components/Button/Button");
12
12
  function NavigationButton({ label, link, text, translationKey, position, icon = position === 'left' ? react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null) : react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, null), className, }) {
13
13
  return (react_1.default.createElement(NavigationButtonWrapper, { "data-component-name": "PageNavigation/NavigationButton", "data-translation-key": translationKey, position: position },
14
- react_1.default.createElement(NavigationButtonLabel, null, text),
15
- react_1.default.createElement(StyledNavigationButton, { size: "large", to: link, extraClass: className, variant: "link", icon: icon, iconPosition: position }, label)));
14
+ react_1.default.createElement(PageNavigationTitle, null, label),
15
+ react_1.default.createElement(Button_1.Button, { to: link, extraClass: className, variant: "link", icon: icon, iconPosition: position }, text)));
16
16
  }
17
17
  const NavigationButtonWrapper = styled_components_1.default.div `
18
18
  display: flex;
19
19
  flex-direction: column;
20
+ width: var(--page-navigation-button-width);
20
21
  text-align: ${({ position }) => position};
22
+ padding: var(--page-navigation-button-padding);
23
+ gap: var(--page-navigation-button-gap);
24
+ border: var(--page-navigation-button-border);
25
+ border-radius: var(--page-navigation-button-border-radius);
26
+ min-width: var(--page-navigation-button-min-width);
27
+
28
+ &:hover {
29
+ border: var(--page-navigation-button-border-hover);
30
+ }
21
31
  `;
22
- const StyledNavigationButton = (0, styled_components_1.default)(Button_1.Button) `
32
+ const PageNavigationTitle = styled_components_1.default.p `
33
+ font-size: var(--page-navigation-button-title-font-size);
34
+ font-weight: var(--page-navigation-button-title-font-weight);
35
+ line-height: var(--page-navigation-button-title-line-height);
36
+ color: var(--page-navigation-button-title-color);
23
37
  text-wrap: wrap;
24
- padding-left: 0;
25
- padding-right: 0;
26
- `;
27
- const NavigationButtonLabel = styled_components_1.default.span `
28
- font-size: var(--font-size-sm);
29
- line-height: var(--line-height-sm);
30
- font-weight: var(--font-weight-regular);
38
+ margin: 0;
31
39
  `;
32
40
  //# sourceMappingURL=NavigationButton.js.map
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.PageNavigation = PageNavigation;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const styled_components_1 = __importDefault(require("styled-components"));
9
+ const utils_1 = require("../../core/utils");
9
10
  const hooks_1 = require("../../core/hooks");
10
11
  const NextButton_1 = require("../../components/PageNavigation/NextButton");
11
12
  const PreviousButton_1 = require("../../components/PageNavigation/PreviousButton");
@@ -24,9 +25,14 @@ const PageNavigationWrapper = styled_components_1.default.div `
24
25
  justify-content: space-between;
25
26
  margin: 25px 0;
26
27
  width: 100%;
28
+ gap: var(--page-navigations-wrapper-gap);
27
29
 
28
30
  @media print {
29
31
  display: none;
30
32
  }
33
+
34
+ @media screen and (max-width: ${utils_1.breakpoints.small}) {
35
+ flex-direction: column;
36
+ }
31
37
  `;
32
38
  //# sourceMappingURL=PageNavigation.js.map
@@ -0,0 +1 @@
1
+ export declare const pageNavigation: import("styled-components").FlattenSimpleInterpolation;
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.pageNavigation = void 0;
4
+ const styled_components_1 = require("styled-components");
5
+ exports.pageNavigation = (0, styled_components_1.css) `
6
+ /**
7
+ * @tokens Page Navigation
8
+ */
9
+
10
+ --page-navigations-wrapper-gap: var(--spacing-base); // @presenter Spacing
11
+
12
+ --page-navigation-button-width: var(--container-max-width); // @presenter Width
13
+ --page-navigation-button-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
14
+ --page-navigation-button-title-font-size: var(--font-size-lg); // @presenter FontSize
15
+ --page-navigation-button-title-font-weight: var(--font-weight-medium); // @presenter FontWeight
16
+ --page-navigation-button-title-line-height: var(--line-height-lg); // @presenter LineHeight
17
+ --page-navigation-button-title-color: var(--text-color-primary); // @presenter Color
18
+ --page-navigation-button-gap: var(--spacing-xxs); // @presenter Spacing
19
+ --page-navigation-button-border-radius: var(--border-radius-xl); // @presenter BorderRadius
20
+ --page-navigation-button-border-color: var(--border-color-secondary); // @presenter Color
21
+ --page-navigation-button-border: var(--border-width) var(--border-style) var(--page-navigation-button-border-color); // @presenter Border
22
+ --page-navigation-button-border-color-hover: var(--color-primary-base, var(--color-warm-grey-11)); // @presenter Color
23
+ --page-navigation-button-border-hover: var(--border-width) var(--border-style) var(--page-navigation-button-border-color-hover); // @presenter Border
24
+ --page-navigation-button-min-width: 220px; // @presenter Width
25
+ // @tokens End
26
+ `;
27
+ //# sourceMappingURL=variables.js.map
@@ -166,7 +166,7 @@ exports.search = (0, styled_components_1.css) `
166
166
  --search-ai-text-line-height: var(--line-height-lg);
167
167
  --search-ai-thinking-text-margin: var(--md-pre-margin) 0;
168
168
 
169
- --search-ai-user-bg-color: var(--color-blue-6);
169
+ --search-ai-user-bg-color: var(--color-primary-base, var(--search-ai-user-bg-color-legacy));
170
170
  --search-ai-user-text-color: var(--color-static-white);
171
171
  --search-ai-assistant-bg-color: var(--layer-color);
172
172
  --search-ai-assistant-text-color: var(--text-color-primary);
@@ -249,7 +249,7 @@ exports.search = (0, styled_components_1.css) `
249
249
  --search-ai-conversation-input-border-radius: var(--border-radius-lg);
250
250
  --search-ai-conversation-input-font-size: var(--font-size-base);
251
251
  --search-ai-conversation-input-placeholder-color: var(--search-input-placeholder-color);
252
- --search-ai-conversation-input-border-color-focus: var(--color-blue-6);
252
+ --search-ai-conversation-input-border-color-focus: var(--color-primary-base, var(--search-ai-conversation-input-border-color-focus-legacy));
253
253
  --search-ai-conversation-input-border-color-disabled: var(--border-color-secondary);
254
254
 
255
255
  --search-ai-conversation-input-send-button-right: 12px;
@@ -3,25 +3,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useModalScrollLock = useModalScrollLock;
4
4
  const react_1 = require("react");
5
5
  function useModalScrollLock(isOpen) {
6
+ const originalBodyStylesRef = (0, react_1.useRef)(null);
6
7
  (0, react_1.useEffect)(() => {
7
8
  if (typeof window === 'undefined' || typeof document === 'undefined') {
8
9
  return;
9
10
  }
10
11
  const { body, documentElement } = document;
11
- const originalOverflow = body.style.overflow;
12
- const originalPaddingRight = body.style.paddingRight;
13
- const originalScrollbarWidth = documentElement.style.getPropertyValue('--modal-scrollbar-width');
14
- const restoreScrollState = () => {
15
- body.style.overflow = originalOverflow;
16
- body.style.paddingRight = originalPaddingRight;
17
- if (originalScrollbarWidth) {
18
- documentElement.style.setProperty('--modal-scrollbar-width', originalScrollbarWidth);
12
+ const restoreOriginalBodyStyles = () => {
13
+ if (!originalBodyStylesRef.current)
14
+ return;
15
+ const { overflow, paddingRight, scrollbarWidth } = originalBodyStylesRef.current;
16
+ body.style.overflow = overflow;
17
+ body.style.paddingRight = paddingRight;
18
+ if (scrollbarWidth) {
19
+ documentElement.style.setProperty('--modal-scrollbar-width', scrollbarWidth);
19
20
  }
20
21
  else {
21
22
  documentElement.style.removeProperty('--modal-scrollbar-width');
22
23
  }
24
+ originalBodyStylesRef.current = null;
23
25
  };
24
- if (isOpen) {
26
+ if (isOpen && !originalBodyStylesRef.current) {
27
+ originalBodyStylesRef.current = {
28
+ overflow: body.style.overflow,
29
+ paddingRight: body.style.paddingRight,
30
+ scrollbarWidth: documentElement.style.getPropertyValue('--modal-scrollbar-width') || null,
31
+ };
25
32
  const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
26
33
  body.style.overflow = 'hidden';
27
34
  if (scrollbarWidth > 0) {
@@ -29,8 +36,12 @@ function useModalScrollLock(isOpen) {
29
36
  documentElement.style.setProperty('--modal-scrollbar-width', `${scrollbarWidth}px`);
30
37
  }
31
38
  }
39
+ else if (!isOpen && originalBodyStylesRef.current) {
40
+ restoreOriginalBodyStyles();
41
+ }
42
+ // Cleanup only if component unmounts while modal is open
32
43
  return () => {
33
- restoreScrollState();
44
+ restoreOriginalBodyStyles();
34
45
  };
35
46
  }, [isOpen]);
36
47
  }
@@ -40,21 +40,17 @@ const DEFAULT_ENABLED_ACTIONS = [
40
40
  'docs-mcp-vscode',
41
41
  ];
42
42
  function usePageActions(pageSlug, mcpUrl, actions) {
43
- var _a, _b, _c;
43
+ var _a;
44
44
  const { useTranslate, usePageData, usePageProps, usePageSharedData, useTelemetry } = (0, use_theme_hooks_1.useThemeHooks)();
45
45
  const { translate } = useTranslate();
46
46
  const themeConfig = (0, use_theme_config_1.useThemeConfig)();
47
47
  const pageProps = usePageProps();
48
48
  const telemetry = useTelemetry();
49
49
  const openApiSharedData = usePageSharedData('openAPIDocsStore');
50
+ const openapiExcludeFromSearch = (_a = openApiSharedData === null || openApiSharedData === void 0 ? void 0 : openApiSharedData.options) === null || _a === void 0 ? void 0 : _a.excludeFromSearch;
50
51
  const mcpConfig = (0, use_mcp_config_1.useMCPConfig)();
51
- const shouldHideAllActions = shouldHidePageActions(pageProps, themeConfig, (_a = openApiSharedData === null || openApiSharedData === void 0 ? void 0 : openApiSharedData.options) === null || _a === void 0 ? void 0 : _a.excludeFromSearch);
52
52
  const { isPublic } = usePageData() || {};
53
53
  const createMCPHandler = (0, react_1.useCallback)((clientType, requiresMcpUrl = false) => () => {
54
- if (requiresMcpUrl && !mcpUrl)
55
- return null;
56
- if (!requiresMcpUrl && (mcpUrl || mcpConfig.isMcpDisabled))
57
- return null;
58
54
  const config = requiresMcpUrl
59
55
  ? { serverName: mcpConfig.serverName, url: mcpUrl || '' }
60
56
  : { serverName: mcpConfig.serverName, url: mcpConfig.serverUrl || '' };
@@ -74,9 +70,14 @@ function usePageActions(pageSlug, mcpUrl, actions) {
74
70
  }, [mcpUrl, mcpConfig, translate, telemetry, pageSlug]);
75
71
  const result = (0, react_1.useMemo)(() => {
76
72
  var _a, _b, _c;
77
- if (shouldHideAllActions) {
78
- return [];
79
- }
73
+ const hideActionContext = {
74
+ pageProps,
75
+ themeConfig,
76
+ openapiExcludeFromSearch,
77
+ isPublic,
78
+ mcpUrl,
79
+ isMcpDisabled: mcpConfig.isMcpDisabled,
80
+ };
80
81
  const origin = dom_1.IS_BROWSER
81
82
  ? window.location.origin
82
83
  : ((_a = globalThis['SSR_HOSTNAME']) !== null && _a !== void 0 ? _a : '');
@@ -126,9 +127,6 @@ function usePageActions(pageSlug, mcpUrl, actions) {
126
127
  },
127
128
  }),
128
129
  chatgpt: () => {
129
- if (!isPublic) {
130
- return null;
131
- }
132
130
  const link = getExternalAiPromptLink('https://chat.openai.com', mdPageUrl);
133
131
  return {
134
132
  buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
@@ -145,9 +143,6 @@ function usePageActions(pageSlug, mcpUrl, actions) {
145
143
  };
146
144
  },
147
145
  claude: () => {
148
- if (!isPublic) {
149
- return null;
150
- }
151
146
  const link = getExternalAiPromptLink('https://claude.ai/new', mdPageUrl);
152
147
  return {
153
148
  buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
@@ -165,15 +160,18 @@ function usePageActions(pageSlug, mcpUrl, actions) {
165
160
  },
166
161
  };
167
162
  return (((_c = (_b = themeConfig.navigation) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.items) || actions || DEFAULT_ENABLED_ACTIONS)
168
- .map((action) => { var _a; return (_a = actionHandlers[action]) === null || _a === void 0 ? void 0 : _a.call(actionHandlers); })
169
- .filter((action) => action !== null);
163
+ .filter((action) => !shouldHideAction(action, hideActionContext))
164
+ .map((action) => actionHandlers[action]());
170
165
  }, [
171
- shouldHideAllActions,
166
+ pageProps,
167
+ themeConfig,
168
+ openapiExcludeFromSearch,
169
+ isPublic,
170
+ mcpUrl,
171
+ mcpConfig.isMcpDisabled,
172
172
  pageSlug,
173
- (_c = (_b = themeConfig.navigation) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.items,
174
173
  actions,
175
174
  translate,
176
- isPublic,
177
175
  createMCPHandler,
178
176
  telemetry,
179
177
  ]);
@@ -198,7 +196,7 @@ function createMCPAction({ clientType, mcpConfig, translate, onClickCallback, })
198
196
  }
199
197
  return Object.assign(Object.assign({}, sharedProps), { buttonText: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), title: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), description: translate('page.actions.connectMcp.vscodeDescription', 'Install MCP server on VS Code'), iconComponent: VSCodeIcon_1.VSCodeIcon });
200
198
  }
201
- function shouldHidePageActions(pageProps, themeConfig, openapiExcludeFromSearch) {
199
+ function shouldHideAction(action, { pageProps, themeConfig, openapiExcludeFromSearch, isPublic, mcpUrl, isMcpDisabled, }) {
202
200
  var _a, _b, _c, _d, _e, _f, _g, _h;
203
201
  // Can't use any actions if search is globally disabled (markdown files are not generated)
204
202
  if ((_a = themeConfig.search) === null || _a === void 0 ? void 0 : _a.hide) {
@@ -212,12 +210,33 @@ function shouldHidePageActions(pageProps, themeConfig, openapiExcludeFromSearch)
212
210
  if ((_e = (_d = themeConfig.navigation) === null || _d === void 0 ? void 0 : _d.actions) === null || _e === void 0 ? void 0 : _e.hide) {
213
211
  return true;
214
212
  }
215
- // Page is excluded from search
216
213
  const isOpenApiPage = ((_f = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _f === void 0 ? void 0 : _f.type) === 'openapi' || ((_g = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _g === void 0 ? void 0 : _g.subType) === 'openapi-operation';
217
214
  const isPageExcludedFromSearch = ((_h = pageProps === null || pageProps === void 0 ? void 0 : pageProps.frontmatter) === null || _h === void 0 ? void 0 : _h.excludeFromSearch) || (isOpenApiPage && openapiExcludeFromSearch);
218
- if (isPageExcludedFromSearch) {
215
+ // Page excluded from search: only explicit MCP connect actions remain visible,
216
+ // since they don't depend on the page's markdown.
217
+ if (isPageExcludedFromSearch && action !== 'mcp-cursor' && action !== 'mcp-vscode') {
219
218
  return true;
220
219
  }
221
- return false;
220
+ return shouldHideActionByType(action, { isPublic, mcpUrl, isMcpDisabled });
221
+ }
222
+ function shouldHideActionByType(action, { isPublic, mcpUrl, isMcpDisabled, }) {
223
+ switch (action) {
224
+ case 'chatgpt':
225
+ case 'claude':
226
+ return !isPublic;
227
+ case 'docs-mcp-cursor':
228
+ case 'docs-mcp-vscode':
229
+ return Boolean(mcpUrl) || isMcpDisabled;
230
+ case 'mcp-cursor':
231
+ case 'mcp-vscode':
232
+ return !mcpUrl;
233
+ case 'copy':
234
+ case 'view':
235
+ return false;
236
+ default: {
237
+ action;
238
+ return true;
239
+ }
240
+ }
222
241
  }
223
242
  //# sourceMappingURL=use-page-actions.js.map
@@ -17,6 +17,7 @@ const variables_dark_12 = require("../../components/PageActions/variables.dark")
17
17
  const variables_dark_13 = require("../../components/Tooltip/variables.dark");
18
18
  const variables_dark_14 = require("../../components/Banner/variables.dark");
19
19
  const variables_dark_15 = require("../../components/Admonition/variables.dark");
20
+ const variables_dark_16 = require("../../components/CodeBlock/variables.dark");
20
21
  const palette_dark_1 = require("./palette.dark");
21
22
  const replayDarkMode = (0, styled_components_1.css) `
22
23
  /**
@@ -349,6 +350,7 @@ exports.darkMode = (0, styled_components_1.css) `
349
350
  ${variables_dark_15.admonitionDarkMode}
350
351
  ${badgesDarkMode}
351
352
  ${palette_dark_1.activeBrandPaletteDark}
353
+ ${variables_dark_16.codeBlockDarkMode}
352
354
  /**
353
355
  * @tokens Dark Theme Scrollbar Config
354
356
  * @presenter Color
@@ -46,6 +46,7 @@ const variables_41 = require("../../components/SkipContent/variables");
46
46
  const variables_42 = require("../../components/PageActions/variables");
47
47
  const variables_43 = require("../../components/SvgViewer/variables");
48
48
  const variables_44 = require("../../components/Toast/variables");
49
+ const variables_45 = require("../../components/PageNavigation/variables");
49
50
  const palette_1 = require("./palette");
50
51
  const dark_1 = require("./dark");
51
52
  const themeColors = (0, styled_components_1.css) `
@@ -477,8 +478,8 @@ const headingsTypography = (0, styled_components_1.css) `
477
478
  * @tokens Typography heading anchor icon
478
479
  */
479
480
 
480
- --heading-anchor-offset-right: 4px; // @presenter Spacing
481
- --heading-anchor-color: var(--button-content-color-primary); // @presenter Color
481
+ --heading-anchor-offset-right: var(--spacing-xs); // @presenter Spacing
482
+ --heading-anchor-color: var(--icon-color-primary); // @presenter Color
482
483
  --heading-anchor-icon: none;
483
484
 
484
485
  /**
@@ -699,9 +700,10 @@ const apiReferenceDocs = (0, styled_components_1.css) `
699
700
  * @tokens API Reference Schema Nested styles
700
701
  */
701
702
 
702
- --schema-nested-offset: calc(var(--spacing-unit) * 2.5); // @presenter Spacing
703
+ --schema-nested-offset: calc(var(--spacing-sm) - 1px); // @presenter Spacing
703
704
  --schema-nested-bg-color: var(--tree-bg-color-active); // @presenter Color
704
-
705
+ --schema-nested-hyperlink-offset: 2px; // @presenter Spacing
706
+
705
707
  /**
706
708
  * @tokens API Reference Schema Required styles
707
709
  */
@@ -733,7 +735,8 @@ const apiReferenceDocs = (0, styled_components_1.css) `
733
735
  * @tokens API Reference Schema Properties
734
736
  */
735
737
 
736
- --schemas-property-name-text-color: var(--text-color-primary); //@presenter Color
738
+ --schemas-property-name-text-color: var(--color-primary-base, var(--text-color-primary)); //@presenter Color
739
+ --schemas-property-name-box-text-color: var(--text-color-primary); // @presenter Color
737
740
  --schemas-property-name-font-size: var(--font-size-base); // @presenter FontSize
738
741
  --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily
739
742
  --schemas-property-name-font-weight: var(--font-weight-regular); // @presenter FontWeight
@@ -1319,6 +1322,7 @@ exports.styles = (0, styled_components_1.css) `
1319
1322
  ${variables_42.pageActions}
1320
1323
  ${variables_43.svgViewer}
1321
1324
  ${variables_44.toast}
1325
+ ${variables_45.pageNavigation}
1322
1326
 
1323
1327
  background-color: var(--bg-color);
1324
1328
  color: var(--text-color-primary);
@@ -192,6 +192,8 @@ function brandPaletteDark(palette) {
192
192
 
193
193
  --admonition-default-bg-color-legacy: var(--color-warm-grey-3);
194
194
  --admonition-default-border-color-legacy: var(--color-warm-grey-5);
195
+
196
+ --code-block-highlighted-bg-color-legacy: color-mix(in srgb, var(--color-warm-grey-4) 40%, transparent);
195
197
  `;
196
198
  }
197
199
  }
@@ -163,6 +163,22 @@ function brandPaletteLight(palette) {
163
163
 
164
164
  --menu-item-bg-color-active-legacy: var(--tree-bg-color-active); // @presenter Color
165
165
  --menu-item-color-active-legacy: var(--tree-content-color-default); // @presenter Color
166
+ --menu-item-color-active-hover-legacy: var(--tree-content-color-hover); // @presenter Color
167
+ --menu-item-bg-color-active-hover-legacy: var(--color-hover-base); // @presenter Color
168
+
169
+ --code-block-highlighted-bg-color-legacy: var(--layer-color-hover); // @presenter Color
170
+ --code-block-tokens-string-color-legacy: var(--color-blue-7); // @presenter Color
171
+
172
+ --security-header-color-legacy: var(--link-color-primary); // @presenter Color
173
+
174
+ --schema-name-color-legacy: var(--text-color-primary); // @presenter Color
175
+
176
+ --search-ai-conversation-input-border-color-focus-legacy: var(--color-blue-6); // @presenter Color
177
+ --search-ai-user-bg-color-legacy: var(--color-blue-6); // @presenter Color
178
+
179
+ --button-content-color-link-legacy: var(--link-color-primary); // @presenter Color
180
+ --button-content-color-link-hover-legacy: var(--link-color-primary-hover); // @presenter Color
181
+ --button-content-color-link-pressed-legacy: var(--link-color-primary-pressed); // @presenter Color
166
182
  `;
167
183
  }
168
184
  }
@@ -143,7 +143,7 @@ export type BffCatalogEntity = {
143
143
  key: string;
144
144
  type: string;
145
145
  title: string;
146
- readonly source: 'api' | 'file';
146
+ readonly source: 'remote' | 'file';
147
147
  domains?: Array<BffCatalogRelatedEntity>;
148
148
  owners?: Array<BffCatalogRelatedEntity>;
149
149
  summary?: string | null;