@redocly/theme 0.38.2 → 0.38.4

package/lib/components/Footer/Footer.js

@@ -37,6 +37,12 @@ const FooterCopyrightWrapper = styled_components_1.default.div `
   @media screen and (min-width: ${utils_1.breakpoints.medium}) {
     margin-top: 0;
   }
+
+  @media screen and (min-width: ${utils_1.breakpoints.max}) {
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
 `;
 const FooterColumnsSection = styled_components_1.default.div `
   display: flex;
@@ -47,6 +53,13 @@ const FooterColumnsSection = styled_components_1.default.div `
   @media screen and (min-width: ${utils_1.breakpoints.small}) {
     flex-direction: row;
   }
+
+  @media screen and (min-width: ${utils_1.breakpoints.max}) {
+    max-width: var(--container-max-width);
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
 `;
 const FooterWrapper = styled_components_1.default.footer `
   padding: var(--mobile-footer-padding-vertical) var(--mobile-footer-padding-horizontal);

package/lib/components/Navbar/Navbar.js

@@ -90,6 +90,12 @@ const NavbarRow = styled_components_1.default.div `
   width: 100%;
   gap: 8px;
   max-width: var(--navbar-container-max-width);
+
+  @media screen and (min-width: ${utils_1.breakpoints.max}) {
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
 `;
 const MobileMenuButton = (0, styled_components_1.default)(Button_1.Button) `
   margin-left: 0px !important;

package/lib/core/styles/global.js

@@ -384,6 +384,7 @@ const sizeAndSpace = (0, styled_components_1.css) `
     */
 
   --container-width: 1200px;
+  --container-max-width: 1504px;
 
   /**
     * @tokens Space

package/lib/core/utils/media-css.d.ts

@@ -2,5 +2,6 @@ export type Breakpoints = {
     small: `${number}px`;
     medium: `${number}px`;
     large: `${number}px`;
+    max: `${number}px`;
 };
 export declare const breakpoints: Breakpoints;

package/lib/core/utils/media-css.js

@@ -1,5 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.breakpoints = void 0;
-exports.breakpoints = { small: '672px', medium: '960px', large: '1280px' };
+exports.breakpoints = {
+    small: '672px',
+    medium: '960px',
+    large: '1280px',
+    max: '1504px',
+};
 //# sourceMappingURL=media-css.js.map

package/lib/layouts/PageLayout.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayout = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../core/utils");
 function PageLayout({ sidebar, children, }) {
     return (react_1.default.createElement(Container, { "data-component-name": "Layout/PageLayout" },
         sidebar,
@@ -16,6 +17,12 @@ const Container = styled_components_1.default.div `
   display: flex;
   flex-direction: row;
   min-height: calc(100vh - var(--navbar-height));
+
+  @media screen and (min-width: ${utils_1.breakpoints.max}) {
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
 `;
 const ContentContainer = styled_components_1.default.div `
   flex: 1 0 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.38.2",
+  "version": "0.38.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -98,7 +98,7 @@
     "timeago.js": "^4.0.2",
     "i18next": "^22.4.12",
     "nprogress": "^0.2.0",
-    "@redocly/config": "0.6.2"
+    "@redocly/config": "0.6.3"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Footer/Footer.tsx

@@ -56,6 +56,12 @@ const FooterCopyrightWrapper = styled.div`
   @media screen and (min-width: ${breakpoints.medium}) {
     margin-top: 0;
   }
+
+  @media screen and (min-width: ${breakpoints.max}) {
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
 `;
 
 const FooterColumnsSection = styled.div`
@@ -67,6 +73,13 @@ const FooterColumnsSection = styled.div`
   @media screen and (min-width: ${breakpoints.small}) {
     flex-direction: row;
   }
+
+  @media screen and (min-width: ${breakpoints.max}) {
+    max-width: var(--container-max-width);
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
 `;
 
 const FooterWrapper = styled.footer<{ withColumns?: boolean }>`

package/src/components/Navbar/Navbar.tsx

@@ -109,6 +109,12 @@ const NavbarRow = styled.div`
   width: 100%;
   gap: 8px;
   max-width: var(--navbar-container-max-width);
+
+  @media screen and (min-width: ${breakpoints.max}) {
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
 `;
 
 const MobileMenuButton = styled(Button)`

package/src/core/styles/global.ts

@@ -386,6 +386,7 @@ const sizeAndSpace = css`
     */
 
   --container-width: 1200px;
+  --container-max-width: 1504px;
 
   /**
     * @tokens Space

package/src/core/utils/media-css.ts

@@ -2,6 +2,12 @@ export type Breakpoints = {
   small: `${number}px`;
   medium: `${number}px`;
   large: `${number}px`;
+  max: `${number}px`;
 };
 
-export const breakpoints: Breakpoints = { small: '672px', medium: '960px', large: '1280px' };
+export const breakpoints: Breakpoints = {
+  small: '672px',
+  medium: '960px',
+  large: '1280px',
+  max: '1504px',
+};

package/src/layouts/PageLayout.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { breakpoints } from '@redocly/theme/core/utils';
+
 interface PageLayoutProps {
   sidebar?: React.ReactNode;
 }
@@ -21,6 +23,12 @@ const Container = styled.div`
   display: flex;
   flex-direction: row;
   min-height: calc(100vh - var(--navbar-height));
+
+  @media screen and (min-width: ${breakpoints.max}) {
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
 `;
 
 const ContentContainer = styled.div`