@redocly/theme 0.18.3-patch.0 → 0.18.3-patch.1

package/lib/components/Sidebar/styledVariables.js

@@ -47,6 +47,7 @@ exports.sidebar = (0, styled_components_1.css) `
   --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
   --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
   --sidebar-item-font-weight: var(--font-weight-regular); // @presenter FontSize
+  --sidebar-item-line-height: var(--line-height-base); // @presenter LineHeight
 
   /**
     * @tokens Sidebar item colors
@@ -56,8 +57,9 @@ exports.sidebar = (0, styled_components_1.css) `
   --sidebar-item-background-color: transparent; // @presenter Color
 
   --sidebar-item-active-color: var(--text-primary); // @presenter Color
-  --sidebar-item-active-background-color: var(--bg-raised); // @presenter Color
+  --sidebar-item-active-background-color: var(--bg-overlay); // @presenter Color
 
+  --sidebar-item-hover-background-color: var(--bg-raised); // @presenter Color
   --sidebar-item-hover-color: var(--text-primary); // @presenter Color
 
   /**
@@ -127,21 +129,24 @@ exports.sidebar = (0, styled_components_1.css) `
 
   --sidebar-item-separator-background-color: var(--sidebar-background-color); // @presenter Color
   --sidebar-item-separator-line-color: var(--border-primary); // @presenter Color
-  --sidebar-item-separator-offset: var(--spacing-lg); // @presenter Spacing
+  --sidebar-item-separator-offset: var(--spacing-sm); // @presenter Spacing
+  --sidebar-item-separator-line-offset: var(--spacing-xxs) var(--sidebar-margin-horizontal); // @presenter Spacing
+  --mobile-sidebar-item-separator-line-offset: var(--spacing-xxs) var(--spacing-xs); // @presenter Spacing
   --sidebar-item-separator-border-width: 1px; // @presenter Spacing
   --sidebar-item-separator-border-color: var(--border-primary); // @presenter Color
-  --sidebar-item-separator-padding-top: var(--spacing-xxs); // @presenter Spacing
+  --sidebar-item-separator-padding: var(--spacing-xxs) var(--sidebar-item-padding-horizontal); // @presenter Spacing
 
   /**
    * @tokens Sidebar item http tag
    */
 
-  --sidebar-item-http-tag-width: 36px;
-  --sidebar-item-http-tag-height: 14px;
+  --sidebar-item-http-tag-width: auto;
+  --sidebar-item-http-tag-height: 20px;
   --sidebar-item-http-tag-font-family: var(--code-font-family); // @presenter FontFamily
-  --sidebar-item-http-tag-font-size: 8px; // @presenter FontSize
+  --sidebar-item-http-tag-font-size: var(--font-size-sm); // @presenter FontSize
   --sidebar-item-http-tag-font-weight: normal; //@presenter FontWeight
-  --sidebar-item-http-tag-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --sidebar-item-http-tag-border-radius: var(--border-radius-xlg); // @presenter BorderRadius
+  --sidebar-item-http-tag-margin: 0 0 0 5px;
 
   /**
     * @tokens Sidebar back button

package/lib/components/Sidebar/types.d.ts

@@ -43,6 +43,7 @@ export interface NavItem {
     requiredPermission?: string;
     menuStyle?: MenuStyle;
     separatorLine?: boolean;
+    linePosition?: 'top' | 'bottom';
     version?: string;
     default?: boolean;
 }

package/lib/components/SidebarActions/CollapseSidebarButton.js

@@ -39,6 +39,10 @@ const ToggleButton = (0, styled_components_1.default)(styled_1.StyledToggleRight
   fill: var(--sidebar-collapse-button-icon-color);
   margin-right: ${({ collapsed }) => (collapsed ? 0 : 'calc(var(--spacing-unit) * -9)')};
   border: 1px solid var(--sidebar-collapse-button-border-color);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-xxs);
+  height: var(--control-height-sm);
+  width: var(--control-height-sm);
 
   ${({ collapsed }) => collapsed &&
     (0, styled_components_1.css) `

package/lib/components/SidebarActions/SidebarActions.js

@@ -9,6 +9,7 @@ const ChangeViewButton_1 = require("../../components/SidebarActions/ChangeViewBu
 const ToggleRightPanelButton_1 = require("../../components/SidebarActions/ToggleRightPanelButton");
 const CollapseSidebarButton_1 = require("../../components/SidebarActions/CollapseSidebarButton");
 const styled_1 = require("../../components/SidebarActions/styled");
+const telemetry_1 = require("../../mocks/telemetry");
 var LayoutVariant;
 (function (LayoutVariant) {
     LayoutVariant["STACKED"] = "stacked";
@@ -17,10 +18,21 @@ var LayoutVariant;
 const SidebarActions = ({ showChangeLayoutButton, showRightPanelToggle, layout, initialShowRightPanelToggle, hideCollapseSidebarButton = false, collapsedSidebar, isOpenapiDocs, onChangeRightPanelViewClick, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
     return (react_1.default.createElement(styled_1.ControlsWrap, { className: className, isOpenapiDocs: isOpenapiDocs, isCollapsed: collapsedSidebar, "data-component-name": "Sidebar/Actions" },
         isOpenapiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
-            initialShowRightPanelToggle && (react_1.default.createElement(ToggleRightPanelButton_1.ToggleRightPanelButton, { showRightPanelToggle: showRightPanelToggle, onClick: onChangeRightPanelViewClick })),
-            showChangeLayoutButton && showRightPanelToggle && (react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { layout: layout, onClick: onChangeViewClick })))),
+            initialShowRightPanelToggle && (react_1.default.createElement(ToggleRightPanelButton_1.ToggleRightPanelButton, { showRightPanelToggle: showRightPanelToggle, onClick: () => {
+                    onChangeRightPanelViewClick();
+                    telemetry_1.telemetry.send('sidebar_samples_button_clicked', {});
+                } })),
+            showChangeLayoutButton && showRightPanelToggle && (react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { layout: layout, onClick: () => {
+                    onChangeViewClick();
+                    telemetry_1.telemetry.send('change_layout_button_clicked', {});
+                } })))),
         !collapsedSidebar && requestAccessButton,
-        !hideCollapseSidebarButton && (react_1.default.createElement(CollapseSidebarButton_1.CollapseSidebarButton, { initialValue: collapsedSidebar, onClick: onChangeCollapseSidebarClick }))));
+        !hideCollapseSidebarButton && (react_1.default.createElement(CollapseSidebarButton_1.CollapseSidebarButton, { initialValue: collapsedSidebar, onClick: () => {
+                onChangeCollapseSidebarClick();
+                collapsedSidebar
+                    ? telemetry_1.telemetry.send('sidebar_item_expanded', {})
+                    : telemetry_1.telemetry.send('sidebar_item_collapsed', {});
+            } }))));
 };
 exports.SidebarActions = SidebarActions;
 //# sourceMappingURL=SidebarActions.js.map

package/lib/components/SidebarActions/styled.js

@@ -44,11 +44,14 @@ exports.StyledToggleRightPanelButton = styled_components_1.default.a `
   cursor: pointer;
   z-index: 1;
   /* Rectangle 201 */
-  border-radius: var(--border-radius);
-  padding: var(--spacing-unit);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-xs);
+  height: var(--control-height-base);
+  width: var(--control-height-base);
+  border: 1px solid var(--border-primary);
 
   &:hover {
-    background-color: var(--sidebar-item-active-background-color);
+    background-color: var(--sidebar-item-hover-background-color);
   }
 `;
 exports.HideRightPanelSVG = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -65,13 +68,16 @@ exports.StyledChangeViewButton = styled_components_1.default.a `
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-md);
+  background: var(--bg-overlay);
   z-index: 1;
   /* Rectangle 201 */
-  padding: var(--spacing-unit);
+  padding: var(--spacing-xs);
+  height: var(--control-height-base);
+  width: var(--control-height-base);
 
   &:hover {
-    background-color: var(--sidebar-item-active-background-color);
+    background-color: var(--sidebar-item-hover-background-color);
   }
 `;
 exports.ChangeViewSvgRow = (0, styled_components_1.default)(() => (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
@@ -91,7 +97,7 @@ exports.ControlsWrap = styled_components_1.default.span `
   justify-content: ${({ isOpenapiDocs }) => (isOpenapiDocs ? 'space-between' : 'flex-end')};
   bottom: 0;
   flex-direction: row;
-  gap: var(--spacing-xxs);
+  gap: var(--spacing-xs);
   align-items: center;
   margin-left: var(--sidebar-controls-margin-left);
   z-index: 2;
@@ -120,7 +126,7 @@ exports.ControlsWrapChangeLayoutButtons = styled_components_1.default.span `
   display: flex;
   bottom: 0;
   flex-direction: ${({ isCollapsed }) => (isCollapsed ? 'column-reverse' : 'row')};
-  gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-unit)')};
+  gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-xs)')};
   align-items: center;
 `;
 //# sourceMappingURL=styled.js.map

package/lib/components/TableOfContent/TableOfContent.js

@@ -34,6 +34,7 @@ const useActiveHeading_1 = require("../../hooks/useActiveHeading");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
 const utils_1 = require("../../components/TableOfContent/utils");
+const telemetry_1 = require("../../mocks/telemetry");
 function TableOfContent(props) {
     const { headings, contentWrapper, className } = props;
     const sidebar = React.useRef(null);
@@ -58,7 +59,7 @@ function TableOfContent(props) {
                         return null;
                     }
                     const href = '#' + heading.id;
-                    return (React.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": `toc-${heading.value}` }));
+                    return (React.createElement(MenuItem, { key: href + idx, href: href, depth: heading.depth - leastDepth + 1 || 0, className: activeHeadingId === heading.id ? 'active' : '', dangerouslySetInnerHTML: { __html: heading.value || '' }, "data-cy": `toc-${heading.value}`, onClick: () => telemetry_1.telemetry.send('toc_item_clicked', {}) }));
                 })))));
 }
 exports.TableOfContent = TableOfContent;

package/lib/components/Tag/Tag.d.ts

@@ -11,6 +11,7 @@ interface TagProps {
     closable?: boolean;
     color?: StatusColor | Color | string;
     icon?: React.ReactNode;
+    onClick?: () => void;
 }
-export declare function Tag({ children, className, color, icon }: TagProps): JSX.Element;
+export declare function Tag({ children, className, color, icon, onClick }: TagProps): JSX.Element;
 export {};

package/lib/components/Tag/Tag.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function Tag({ children, className, color = 'default', icon }) {
-    return (react_1.default.createElement(TagContainer, { className: className, color: color },
+function Tag({ children, className, color, icon, onClick }) {
+    return (react_1.default.createElement(TagContainer, { className: className, color: color, onClick: onClick },
         icon ? icon : null,
         children));
 }
 exports.Tag = Tag;
 const TagContainer = styled_components_1.default.div.attrs(({ className, color }) => ({
     'data-component-name': 'Tag/Tag',
-    className: className + ` tag-${color}`,
+    className: (className || '') + ` tag-default ${color ? `tag-${color}` : ''}`,
 })) `
   display: inline-flex;
   align-items: center;

package/lib/components/Tag/styledVariables.js

@@ -45,7 +45,7 @@ exports.tag = (0, styled_components_1.css) `
   .tag-schema,
   .tag-default {
     --tag-color: var(--text-primary); // @presenter Color
-    --tag-background-color: var(--bg-raised); // @presenter Color
+    --tag-background-color: var(--bg-overlay); // @presenter Color
     --tag-border-color: var(--border-primary); // @presenter Color
   }
 
@@ -53,76 +53,76 @@ exports.tag = (0, styled_components_1.css) `
   .tag-success,
   .tag-approved,
   .tag-get {
-    --tag-color: var(--color-success-base); // @presenter Color
-    --tag-background-color: var(--color-success-bg); // @presenter Color
-    --tag-border-color: var(--color-success-border); // @presenter Color
+    --tag-color: var(--color-success-active); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-success-active); // @presenter Color
   }
 
   .tag-red,
   .tag-error,
   .tag-declined,
   .tag-delete {
-    --tag-color: var(--color-error-base); // @presenter Color
+    --tag-color: var(--color-error-active); // @presenter Color
     --tag-background-color: var(--color-error-bg); // @presenter Color
-    --tag-border-color: var(--color-error-border); // @presenter Color
+    --tag-border-color: var(--color-error-active); // @presenter Color
   }
 
   .tag-gold,
   .tag-warning,
   .tag-deprecated,
   .tag-put {
-    --tag-color: var(--color-warning-base); // @presenter Color
-    --tag-background-color: var(--color-warning-bg); // @presenter Color
-    --tag-border-color: var(--color-warning-border); // @presenter Color
+    --tag-color: var(--color-warning-active); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-warning-active); // @presenter Color
   }
 
   .tag-blue,
   .tag-processing,
   .tag-post {
-    --tag-color: var(--color-info-base); // @presenter Color
-    --tag-background-color: var(--color-info-bg); // @presenter Color
-    --tag-border-color: var(--color-info-border); // @presenter Color
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-info-active); // @presenter Color
   }
 
   .tag-purple,
   .tag-head {
-    --tag-color: var(--color-purple-6); // @presenter Color
-    --tag-background-color: var(--color-purple-1); // @presenter Color
-    --tag-border-color: var(--color-purple-3); // @presenter Color
+    --tag-color: var(--color-purple-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-purple-7); // @presenter Color
   }
 
   .tag-cyan,
   .tag-option {
-    --tag-color: var(--color-cyan-6); // @presenter Color
-    --tag-background-color: var(--color-cyan-1); // @presenter Color
-    --tag-border-color: var(--color-cyan-3); // @presenter Color
+    --tag-color: var(--color-cyan-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-cyan-7); // @presenter Color
   }
 
   .tag-yellow,
   .tag-patch {
-    --tag-color: var(--color-yellow-6); // @presenter Color
-    --tag-background-color: var(--color-yellow-1); // @presenter Color
-    --tag-border-color: var(--color-yellow-3); // @presenter Color
+    --tag-color: var(--color-yellow-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-yellow-7); // @presenter Color
   }
 
   .tag-geekblue,
   .tag-link {
-    --tag-color: var(--color-geekblue-6); // @presenter Color
-    --tag-background-color: var(--color-geekblue-1); // @presenter Color
-    --tag-border-color: var(--color-geekblue-3); // @presenter Color
+    --tag-color: var(--color-geekblue-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-geekblue-7); // @presenter Color
   }
 
   .tag-magneta,
   .tag-hook {
-    --tag-color: var(--color-magneta-6); // @presenter Color
-    --tag-background-color: var(--color-magneta-1); // @presenter Color
-    --tag-border-color: var(--color-magneta-3); // @presenter Color
+    --tag-color: var(--color-magneta-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-magneta-7); // @presenter Color
   }
 
   .tag-lime {
-    --tag-color: var(--color-lime-6); // @presenter Color
-    --tag-background-color: var(--color-lime-1); // @presenter Color
-    --tag-border-color: var(--color-lime-3); // @presenter Color
+    --tag-color: var(--color-lime-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-lime-7); // @presenter Color
   }
 
   // @tokens End

package/lib/components/Tiles/ThinTile.js

@@ -36,20 +36,20 @@ const TileHeader_1 = require("../../components/Tiles/TileHeader");
 const ThinTileWrapper = (0, styled_components_1.default)(Link_1.Link) `
   display: flex;
   flex-direction: column;
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  border-radius: var(--border-radius-lg);
   box-sizing: border-box;
-  transition: box-shadow 0.25s ease;
-  padding: 24px;
+  padding: var(--spacing-lg);
   margin-bottom: 20px;
   text-decoration: none;
   width: 100%;
+  color: var(--text-primary);
+  border: 1px solid var(--border-secondary);
   background-color: ${({ bgColor }) => bgColor || 'var(--thin-tile-background-color)'};
   background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
   background-repeat: no-repeat;
 
   :hover {
-    box-shadow: 0 10px 100px 0 rgba(35, 35, 35, 0.2);
+    border-color: var(--border-primary);
   }
 
   ${({ theme }) => theme.mediaQueries.small} {
@@ -81,9 +81,11 @@ const ThinTileIcon = styled_components_1.default.img `
 `;
 const ThinTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader) `
   font-size: 24px;
+  font-weight: var(--font-weight-bold);
   text-align: ${({ align }) => align || 'center'};
 `;
 const ThinTileText = (0, styled_components_1.default)(TileText_1.TileText) `
+  color: var(--text-secondary);
   font-size: 18px;
   line-height: 1.5;
   flex-shrink: 0;

package/lib/components/Tiles/WideTile.js

@@ -36,21 +36,21 @@ const TileHeader_1 = require("../../components/Tiles/TileHeader");
 const WideTileWrapper = (0, styled_components_1.default)(Link_1.Link) `
   display: inline-flex;
   flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  color: var(--text-primary);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--border-radius-lg);
   background-color: ${({ bgColor }) => bgColor || 'var(--wide-tile-background-color)'};
   background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
   background-repeat: no-repeat;
-  padding: 24px;
+  padding: var(--spacing-lg);
   padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
-  margin-bottom: 32px;
+  margin-bottom: var(--spacing-xl);
   box-sizing: border-box;
   position: relative;
   text-decoration: none;
   width: 100%;
-  transition: box-shadow 0.25s ease;
   :hover {
-    box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.2);
+    border-color: var(--border-primary);
   }
   :before {
     content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};
@@ -70,17 +70,19 @@ const WideTileWrapper = (0, styled_components_1.default)(Link_1.Link) `
   
   ${({ theme }) => theme.mediaQueries.medium} {
     width: calc(50% - 2em);
-    padding: 32px;
-    padding-right: ${({ disableArrow }) => (disableArrow ? '32px' : '64px')};
+    padding: var(--spacing-xl);
+    padding-right: ${({ disableArrow }) => (disableArrow ? 'var(--spacing-xl)' : '64px')};
     flex-direction: row;
     max-width: ${({ maxWidth }) => maxWidth};
   }
 `;
 const WideTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader) `
   font-size: 24px;
+  font-weight: var(--font-weight-bold);
   text-align: ${({ align }) => align || 'left'};
 `;
 const WideTileText = (0, styled_components_1.default)(TileText_1.TileText) `
+  color: var(--text-secondary);
   font-size: 18px;
   text-align: ${({ align }) => align || 'left'};
 `;

package/lib/components/Typography/SectionHeader.js

@@ -9,9 +9,9 @@ exports.SectionHeader = styled_components_1.default.h2.attrs(({ className }) =>
     'data-component-name': 'Typography/SectionHeader',
     className,
 })) `
-  color: var(--h2-color);
+  color: var(--h2-text-color);
   font-size: var(--h2-font-size);
-  font-weight: var(--h2-font-weight);
+  font-weight: var(--font-weight-regular);
   text-align: center;
   margin: 2.65em 0;
   padding: 0 20px;

package/lib/config.d.ts

@@ -485,6 +485,11 @@ declare const catalogSchema: {
                                 readonly separatorLine: {
                                     readonly type: "boolean";
                                 };
+                                readonly linePosition: {
+                                    readonly type: "string";
+                                    readonly enum: readonly ["top", "bottom"];
+                                    readonly default: "top";
+                                };
                                 readonly version: {
                                     readonly type: "string";
                                 };
@@ -529,6 +534,11 @@ declare const catalogSchema: {
                     readonly separatorLine: {
                         readonly type: "boolean";
                     };
+                    readonly linePosition: {
+                        readonly type: "string";
+                        readonly enum: readonly ["top", "bottom"];
+                        readonly default: "top";
+                    };
                     readonly version: {
                         readonly type: "string";
                     };
@@ -640,6 +650,11 @@ export declare const themeConfigSchema: {
                                         readonly separatorLine: {
                                             readonly type: "boolean";
                                         };
+                                        readonly linePosition: {
+                                            readonly type: "string";
+                                            readonly enum: readonly ["top", "bottom"];
+                                            readonly default: "top";
+                                        };
                                         readonly version: {
                                             readonly type: "string";
                                         };
@@ -684,6 +699,11 @@ export declare const themeConfigSchema: {
                             readonly separatorLine: {
                                 readonly type: "boolean";
                             };
+                            readonly linePosition: {
+                                readonly type: "string";
+                                readonly enum: readonly ["top", "bottom"];
+                                readonly default: "top";
+                            };
                             readonly version: {
                                 readonly type: "string";
                             };
@@ -766,6 +786,11 @@ export declare const themeConfigSchema: {
                                         readonly separatorLine: {
                                             readonly type: "boolean";
                                         };
+                                        readonly linePosition: {
+                                            readonly type: "string";
+                                            readonly enum: readonly ["top", "bottom"];
+                                            readonly default: "top";
+                                        };
                                         readonly version: {
                                             readonly type: "string";
                                         };
@@ -810,6 +835,11 @@ export declare const themeConfigSchema: {
                             readonly separatorLine: {
                                 readonly type: "boolean";
                             };
+                            readonly linePosition: {
+                                readonly type: "string";
+                                readonly enum: readonly ["top", "bottom"];
+                                readonly default: "top";
+                            };
                             readonly version: {
                                 readonly type: "string";
                             };
@@ -849,6 +879,14 @@ export declare const themeConfigSchema: {
                 readonly hide: {
                     readonly type: "boolean";
                 };
+                readonly separatorLine: {
+                    readonly type: "boolean";
+                };
+                readonly linePosition: {
+                    readonly type: "string";
+                    readonly enum: readonly ["top", "bottom"];
+                    readonly default: "bottom";
+                };
             };
             readonly additionalProperties: false;
         };
@@ -1738,6 +1776,11 @@ export declare const themeConfigSchema: {
                                                 readonly separatorLine: {
                                                     readonly type: "boolean";
                                                 };
+                                                readonly linePosition: {
+                                                    readonly type: "string";
+                                                    readonly enum: readonly ["top", "bottom"];
+                                                    readonly default: "top";
+                                                };
                                                 readonly version: {
                                                     readonly type: "string";
                                                 };
@@ -1782,6 +1825,11 @@ export declare const themeConfigSchema: {
                                     readonly separatorLine: {
                                         readonly type: "boolean";
                                     };
+                                    readonly linePosition: {
+                                        readonly type: "string";
+                                        readonly enum: readonly ["top", "bottom"];
+                                        readonly default: "top";
+                                    };
                                     readonly version: {
                                         readonly type: "string";
                                     };
@@ -1954,6 +2002,11 @@ export declare const productThemeOverrideSchema: {
                                         readonly separatorLine: {
                                             readonly type: "boolean";
                                         };
+                                        readonly linePosition: {
+                                            readonly type: "string";
+                                            readonly enum: readonly ["top", "bottom"];
+                                            readonly default: "top";
+                                        };
                                         readonly version: {
                                             readonly type: "string";
                                         };
@@ -1998,6 +2051,11 @@ export declare const productThemeOverrideSchema: {
                             readonly separatorLine: {
                                 readonly type: "boolean";
                             };
+                            readonly linePosition: {
+                                readonly type: "string";
+                                readonly enum: readonly ["top", "bottom"];
+                                readonly default: "top";
+                            };
                             readonly version: {
                                 readonly type: "string";
                             };
@@ -2061,6 +2119,11 @@ export declare const productThemeOverrideSchema: {
                                         readonly separatorLine: {
                                             readonly type: "boolean";
                                         };
+                                        readonly linePosition: {
+                                            readonly type: "string";
+                                            readonly enum: readonly ["top", "bottom"];
+                                            readonly default: "top";
+                                        };
                                         readonly version: {
                                             readonly type: "string";
                                         };
@@ -2105,6 +2168,11 @@ export declare const productThemeOverrideSchema: {
                             readonly separatorLine: {
                                 readonly type: "boolean";
                             };
+                            readonly linePosition: {
+                                readonly type: "string";
+                                readonly enum: readonly ["top", "bottom"];
+                                readonly default: "top";
+                            };
                             readonly version: {
                                 readonly type: "string";
                             };
@@ -2144,6 +2212,14 @@ export declare const productThemeOverrideSchema: {
                 readonly hide: {
                     readonly type: "boolean";
                 };
+                readonly separatorLine: {
+                    readonly type: "boolean";
+                };
+                readonly linePosition: {
+                    readonly type: "string";
+                    readonly enum: readonly ["top", "bottom"];
+                    readonly default: "bottom";
+                };
             };
             readonly additionalProperties: false;
         };

package/lib/config.js

@@ -225,6 +225,11 @@ const navItemSchema = {
         label: { type: 'string' },
         separator: { type: 'string' },
         separatorLine: { type: 'boolean' },
+        linePosition: {
+            type: 'string',
+            enum: ['top', 'bottom'],
+            default: 'top',
+        },
         version: { type: 'string' },
         menuStyle: { type: 'string', enum: ['drilldown'] },
         expanded: { type: 'string', const: 'always' },
@@ -365,7 +370,15 @@ exports.themeConfigSchema = {
             properties: Object.assign({ items: navItemsSchema, copyrightText: { type: 'string' } }, hideConfigSchema.properties),
             additionalProperties: false,
         },
-        sidebar: hideConfigSchema,
+        sidebar: {
+            type: 'object',
+            properties: Object.assign({ separatorLine: { type: 'boolean' }, linePosition: {
+                    type: 'string',
+                    enum: ['top', 'bottom'],
+                    default: 'bottom',
+                } }, hideConfigSchema.properties),
+            additionalProperties: false,
+        },
         scripts: {
             type: 'object',
             properties: {