@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.
- package/lib/components/Button/variables.js +3 -3
- package/lib/components/CodeBlock/CodeBlockContainer.js +12 -7
- package/lib/components/CodeBlock/variables.dark.d.ts +1 -0
- package/lib/components/CodeBlock/variables.dark.js +8 -0
- package/lib/components/CodeBlock/variables.js +3 -1
- package/lib/components/Menu/MenuItem.js +15 -26
- package/lib/components/Menu/variables.dark.js +2 -0
- package/lib/components/Menu/variables.js +3 -1
- package/lib/components/PageNavigation/NavigationButton.js +19 -11
- package/lib/components/PageNavigation/PageNavigation.js +6 -0
- package/lib/components/PageNavigation/variables.d.ts +1 -0
- package/lib/components/PageNavigation/variables.js +27 -0
- package/lib/components/Search/variables.js +2 -2
- package/lib/core/hooks/use-modal-scroll-lock.js +21 -10
- package/lib/core/hooks/use-page-actions.js +43 -24
- package/lib/core/styles/dark.js +2 -0
- package/lib/core/styles/global.js +9 -5
- package/lib/core/styles/palette.dark.js +2 -0
- package/lib/core/styles/palette.js +16 -0
- package/lib/core/types/catalog.d.ts +1 -1
- package/lib/core/types/l10n.d.ts +1 -1
- package/lib/icons/LinkIcon/LinkIcon.js +6 -6
- package/lib/markdoc/components/Heading/Heading.js +7 -1
- package/package.json +3 -3
- package/src/components/Button/variables.ts +3 -3
- package/src/components/CodeBlock/CodeBlockContainer.tsx +12 -7
- package/src/components/CodeBlock/variables.dark.ts +5 -0
- package/src/components/CodeBlock/variables.ts +3 -1
- package/src/components/Menu/MenuItem.tsx +15 -26
- package/src/components/Menu/variables.dark.ts +2 -0
- package/src/components/Menu/variables.ts +3 -1
- package/src/components/PageNavigation/NavigationButton.tsx +24 -22
- package/src/components/PageNavigation/PageNavigation.tsx +6 -0
- package/src/components/PageNavigation/variables.ts +24 -0
- package/src/components/Search/variables.ts +2 -2
- package/src/core/hooks/use-modal-scroll-lock.ts +30 -14
- package/src/core/hooks/use-page-actions.ts +70 -33
- package/src/core/styles/dark.ts +2 -0
- package/src/core/styles/global.ts +9 -5
- package/src/core/styles/palette.dark.ts +2 -0
- package/src/core/styles/palette.ts +16 -0
- package/src/core/types/catalog.ts +1 -1
- package/src/core/types/l10n.ts +9 -0
- package/src/icons/LinkIcon/LinkIcon.tsx +19 -6
- 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(--
|
|
53
|
-
--button-content-color-link-hover: var(--
|
|
54
|
-
--button-content-color-link-pressed: var(--
|
|
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(--
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
124
|
+
color: var(--color-success-active);
|
|
121
125
|
}
|
|
122
126
|
}
|
|
123
127
|
&.remove {
|
|
124
|
-
background: var(--color-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
-
|
|
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(
|
|
15
|
-
react_1.default.createElement(
|
|
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
|
|
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
|
-
|
|
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-
|
|
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-
|
|
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
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
body.style.overflow =
|
|
16
|
-
body.style.paddingRight =
|
|
17
|
-
if (
|
|
18
|
-
documentElement.style.setProperty('--modal-scrollbar-width',
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
78
|
-
|
|
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
|
-
.
|
|
169
|
-
.
|
|
163
|
+
.filter((action) => !shouldHideAction(action, hideActionContext))
|
|
164
|
+
.map((action) => actionHandlers[action]());
|
|
170
165
|
}, [
|
|
171
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
package/lib/core/styles/dark.js
CHANGED
|
@@ -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:
|
|
481
|
-
--heading-anchor-color: var(--
|
|
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-
|
|
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: '
|
|
146
|
+
readonly source: 'remote' | 'file';
|
|
147
147
|
domains?: Array<BffCatalogRelatedEntity>;
|
|
148
148
|
owners?: Array<BffCatalogRelatedEntity>;
|
|
149
149
|
summary?: string | null;
|