@redocly/theme 0.38.1 → 0.38.3

package/lib/components/Feedback/Mood.js

@@ -101,15 +101,15 @@ function Mood({ settings, onSubmit, className }) {
             React.createElement(StyledFormMandatoryFields, null,
                 React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
-                    React.createElement(Button_1.Button, { type: "button", variant: score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary', size: "medium", onClick: () => {
-                            setScore(MOOD_STATES.SATISFIED);
-                        }, icon: React.createElement(FaceSatisfiedIcon_1.FaceSatisfiedIcon, null) }),
+                    React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary', tone: score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default', onClick: () => {
+                            setScore(MOOD_STATES.DISSATISFIED);
+                        }, icon: React.createElement(FaceDissatisfiedIcon_1.FaceDissatisfiedIcon, null) }),
                     React.createElement(Button_1.Button, { type: "button", variant: score === MOOD_STATES.NEUTRAL ? 'primary' : 'secondary', size: "medium", onClick: () => {
                             setScore(MOOD_STATES.NEUTRAL);
                         }, icon: React.createElement(FaceNeutralIcon_1.FaceNeutralIcon, null) }),
-                    React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary', tone: score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default', onClick: () => {
-                            setScore(MOOD_STATES.DISSATISFIED);
-                        }, icon: React.createElement(FaceDissatisfiedIcon_1.FaceDissatisfiedIcon, null) }))),
+                    React.createElement(Button_1.Button, { type: "button", variant: score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary', size: "medium", onClick: () => {
+                            setScore(MOOD_STATES.SATISFIED);
+                        }, icon: React.createElement(FaceSatisfiedIcon_1.FaceSatisfiedIcon, null) }))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
                 displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {
                         label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,

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/components/Switch/Switch.d.ts

@@ -0,0 +1,6 @@
+export type SwitchProps = {
+    value: boolean;
+    onChange: (value: boolean) => void;
+    disabled?: boolean;
+};
+export declare function Switch({ value, disabled, onChange }: SwitchProps): JSX.Element;

package/lib/components/Switch/Switch.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+function Switch({ value = false, disabled = false, onChange }) {
+    const handleClick = () => {
+        if (disabled)
+            return;
+        onChange(!value);
+    };
+    return (react_1.default.createElement(SwitchWrapper, { onClick: handleClick, role: "switch", selected: value, disabled: disabled },
+        react_1.default.createElement(Knob, { selected: value })));
+}
+exports.Switch = Switch;
+const SwitchWrapper = styled_components_1.default.div `
+  width: var(--switch-width);
+  height: var(--switch-height);
+  border-radius: var(--switch-border-radius);
+  background-color: ${({ selected, disabled }) => disabled
+    ? 'var(--switch-bg-color-disabled)'
+    : selected
+        ? 'var(--switch-bg-color-selected)'
+        : 'var(--switch-bg-color)'};
+  display: flex;
+  align-items: center;
+  padding: var(--switch-padding);
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  transition: var(--switch-bg-transition);
+
+  ${({ disabled }) => !disabled &&
+    (0, styled_components_1.css) `
+      &:hover {
+        background-color: var(--switch-bg-color-hover);
+      }
+    `}
+
+  &:active {
+    background-color: var(--switch-bg-color-pressed);
+  }
+`;
+const Knob = styled_components_1.default.div `
+  width: var(--switch-knob-width);
+  height: var(--switch-knob-height);
+  border-radius: var(--switch-knob-border-radius);
+  background-color: ${({ selected }) => selected ? 'var(--switch-knob-bg-color-selected)' : 'var(--switch-knob-bg-color)'};
+  transform: ${({ selected }) => selected ? 'translateX(var(--switch-knob-width))' : 'translateX(0)'};
+  transition: var(--switch-knob-transition);
+`;
+//# sourceMappingURL=Switch.js.map

package/lib/components/Switch/variables.d.ts

@@ -0,0 +1 @@
+export declare const switcher: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Switch/variables.dark.d.ts

@@ -0,0 +1 @@
+export declare const switcherDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Switch/variables.dark.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.switcherDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.switcherDarkMode = (0, styled_components_1.css) `
+    --switch-bg-color: var(--color-warm-grey-6); // @presenter Color
+    --switch-bg-color-selected: var(--color-warm-grey-6); // @presenter Color
+    --switch-bg-color-hover: var(--color-warm-grey-7); // @presenter Color
+    --switch-bg-color-pressed: var(--color-warm-grey-7); // @presenter Color
+    --switch-bg-color-disabled: var(--color-warm-grey-5); // @presenter Color
+    --switch-knob-bg-color: var(--color-warm-grey-8); // @presenter Color
+    --switch-knob-bg-color-selected: var(--color-warm-grey-11); // @presenter Color
+    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-width: 32px; // @presenter Width
+    --switch-height: 18px; // @presenter Height
+    --switch-padding: calc(var(--spacing-xxs) / 2); // @presenter Padding
+    --switch-bg-transition: background-color 0.3s; // @presenter Transition
+    --switch-knob-height: 14px; // @presenter Height
+    --switch-knob-width: 14px; // @presenter Width
+    --switch-knob-transition: all 0.3s; // @presenter Transition
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/components/Switch/variables.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.switcher = void 0;
+const styled_components_1 = require("styled-components");
+exports.switcher = (0, styled_components_1.css) `
+    --switch-bg-color: var(--color-warm-grey-4); // @presenter Color
+    --switch-bg-color-selected: var(--color-warm-grey-9); // @presenter Color
+    --switch-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
+    --switch-bg-color-pressed: var(--color-warm-grey-6); // @presenter Color
+    --switch-bg-color-disabled: var(--color-warm-grey-3); // @presenter Color
+    --switch-knob-bg-color: var(--color-white); // @presenter Color
+    --switch-knob-bg-color-selected: var(--color-white); // @presenter Color
+    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-width: 32px; // @presenter Width
+    --switch-height: 18px; // @presenter Height
+    --switch-padding: calc(var(--spacing-xxs) / 2); // @presenter Padding
+    --switch-bg-transition: background-color 0.3s; // @presenter Transition
+    --switch-knob-height: 14px; // @presenter Height
+    --switch-knob-width: 14px; // @presenter Width
+    --switch-knob-transition: transform 0.3s; // @presenter Transition
+`;
+//# sourceMappingURL=variables.js.map

package/lib/core/styles/dark.js

@@ -10,6 +10,7 @@ const variables_dark_5 = require("../../components/Segmented/variables.dark");
 const variables_dark_6 = require("../../icons/CheckboxIcon/variables.dark");
 const variables_dark_7 = require("../../components/Tag/variables.dark");
 const variables_dark_8 = require("../../components/StatusCode/variables.dark");
+const variables_dark_9 = require("../../components/Switch/variables.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
     * @tokens Replay Colors
@@ -299,6 +300,8 @@ exports.darkMode = (0, styled_components_1.css) `
   ${variables_dark_2.mermaidDarkMode}
   ${variables_dark_1.scorecardDarkMode}
   ${replayDarkMode}
+  ${variables_dark_9.switcherDarkMode}
+
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/lib/core/styles/global.js

@@ -36,6 +36,7 @@ const variables_30 = require("../../components/UserMenu/variables");
 const variables_31 = require("../../components/Tags/variables");
 const variables_32 = require("../../components/VersionPicker/variables");
 const variables_33 = require("../../components/DatePicker/variables");
+const variables_34 = require("../../components/Switch/variables");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
   /**
@@ -383,6 +384,7 @@ const sizeAndSpace = (0, styled_components_1.css) `
     */
 
   --container-width: 1200px;
+  --container-max-width: 1504px;
 
   /**
     * @tokens Space
@@ -1177,6 +1179,7 @@ exports.styles = (0, styled_components_1.css) `
     ${icon}
     ${tree}
     ${variables_29.segmented}
+    ${variables_34.switcher}
     ${variables_14.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}

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/index.d.ts

@@ -5,6 +5,7 @@ export * from './components/JsonViewer/JsonViewer';
 export * from './components/Tag/Tag';
 export * from './components/TableOfContent/TableOfContent';
 export * from './components/ColorModeSwitcher/ColorModeSwitcher';
+export * from './components/Switch/Switch';
 export * from './components/Select/Select';
 export * from './components/Badge/Badge';
 export * from './components/Dropdown/Dropdown';

package/lib/index.js

@@ -35,6 +35,7 @@ __exportStar(require("./components/JsonViewer/JsonViewer"), exports);
 __exportStar(require("./components/Tag/Tag"), exports);
 __exportStar(require("./components/TableOfContent/TableOfContent"), exports);
 __exportStar(require("./components/ColorModeSwitcher/ColorModeSwitcher"), exports);
+__exportStar(require("./components/Switch/Switch"), exports);
 __exportStar(require("./components/Select/Select"), exports);
 __exportStar(require("./components/Badge/Badge"), exports);
 __exportStar(require("./components/Dropdown/Dropdown"), exports);

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.1",
+  "version": "0.38.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Feedback/Mood.tsx

@@ -124,12 +124,13 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
           <StyledMandatoryFieldContainer>
             <Button
               type="button"
-              variant={score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary'}
               size="medium"
+              variant={score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary'}
+              tone={score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default'}
               onClick={() => {
-                setScore(MOOD_STATES.SATISFIED);
+                setScore(MOOD_STATES.DISSATISFIED);
               }}
-              icon={<FaceSatisfiedIcon />}
+              icon={<FaceDissatisfiedIcon />}
             />
             <Button
               type="button"
@@ -142,13 +143,12 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
             />
             <Button
               type="button"
+              variant={score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary'}
               size="medium"
-              variant={score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary'}
-              tone={score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default'}
               onClick={() => {
-                setScore(MOOD_STATES.DISSATISFIED);
+                setScore(MOOD_STATES.SATISFIED);
               }}
-              icon={<FaceDissatisfiedIcon />}
+              icon={<FaceSatisfiedIcon />}
             />
           </StyledMandatoryFieldContainer>
         </StyledFormMandatoryFields>

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/components/Switch/Switch.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+export type SwitchProps = {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  disabled?: boolean;
+};
+
+export function Switch({ value = false, disabled = false, onChange }: SwitchProps): JSX.Element {
+  const handleClick = () => {
+    if (disabled) return;
+    onChange(!value);
+  };
+
+  return (
+    <SwitchWrapper onClick={handleClick} role="switch" selected={value} disabled={disabled}>
+      <Knob selected={value} />
+    </SwitchWrapper>
+  );
+}
+
+const SwitchWrapper = styled.div<{ selected: boolean; disabled: boolean }>`
+  width: var(--switch-width);
+  height: var(--switch-height);
+  border-radius: var(--switch-border-radius);
+  background-color: ${({ selected, disabled }) =>
+    disabled
+      ? 'var(--switch-bg-color-disabled)'
+      : selected
+      ? 'var(--switch-bg-color-selected)'
+      : 'var(--switch-bg-color)'};
+  display: flex;
+  align-items: center;
+  padding: var(--switch-padding);
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  transition: var(--switch-bg-transition);
+
+  ${({ disabled }) =>
+    !disabled &&
+    css`
+      &:hover {
+        background-color: var(--switch-bg-color-hover);
+      }
+    `}
+
+  &:active {
+    background-color: var(--switch-bg-color-pressed);
+  }
+`;
+
+const Knob = styled.div<{ selected: boolean }>`
+  width: var(--switch-knob-width);
+  height: var(--switch-knob-height);
+  border-radius: var(--switch-knob-border-radius);
+  background-color: ${({ selected }) =>
+    selected ? 'var(--switch-knob-bg-color-selected)' : 'var(--switch-knob-bg-color)'};
+  transform: ${({ selected }) =>
+    selected ? 'translateX(var(--switch-knob-width))' : 'translateX(0)'};
+  transition: var(--switch-knob-transition);
+`;

package/src/components/Switch/variables.dark.ts

@@ -0,0 +1,20 @@
+import { css } from 'styled-components';
+
+export const switcherDarkMode = css`
+    --switch-bg-color: var(--color-warm-grey-6); // @presenter Color
+    --switch-bg-color-selected: var(--color-warm-grey-6); // @presenter Color
+    --switch-bg-color-hover: var(--color-warm-grey-7); // @presenter Color
+    --switch-bg-color-pressed: var(--color-warm-grey-7); // @presenter Color
+    --switch-bg-color-disabled: var(--color-warm-grey-5); // @presenter Color
+    --switch-knob-bg-color: var(--color-warm-grey-8); // @presenter Color
+    --switch-knob-bg-color-selected: var(--color-warm-grey-11); // @presenter Color
+    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-width: 32px; // @presenter Width
+    --switch-height: 18px; // @presenter Height
+    --switch-padding: calc(var(--spacing-xxs) / 2); // @presenter Padding
+    --switch-bg-transition: background-color 0.3s; // @presenter Transition
+    --switch-knob-height: 14px; // @presenter Height
+    --switch-knob-width: 14px; // @presenter Width
+    --switch-knob-transition: all 0.3s; // @presenter Transition
+`;

package/src/components/Switch/variables.ts

@@ -0,0 +1,20 @@
+import { css } from 'styled-components';
+
+export const switcher = css`
+    --switch-bg-color: var(--color-warm-grey-4); // @presenter Color
+    --switch-bg-color-selected: var(--color-warm-grey-9); // @presenter Color
+    --switch-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
+    --switch-bg-color-pressed: var(--color-warm-grey-6); // @presenter Color
+    --switch-bg-color-disabled: var(--color-warm-grey-3); // @presenter Color
+    --switch-knob-bg-color: var(--color-white); // @presenter Color
+    --switch-knob-bg-color-selected: var(--color-white); // @presenter Color
+    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-width: 32px; // @presenter Width
+    --switch-height: 18px; // @presenter Height
+    --switch-padding: calc(var(--spacing-xxs) / 2); // @presenter Padding
+    --switch-bg-transition: background-color 0.3s; // @presenter Transition
+    --switch-knob-height: 14px; // @presenter Height
+    --switch-knob-width: 14px; // @presenter Width
+    --switch-knob-transition: transform 0.3s; // @presenter Transition
+`;

package/src/core/styles/dark.ts

@@ -8,6 +8,7 @@ import { segmentedButtonsDarkMode } from '@redocly/theme/components/Segmented/va
 import { checkboxDarkMode } from '@redocly/theme/icons/CheckboxIcon/variables.dark';
 import { tagDarkMode } from '@redocly/theme/components/Tag/variables.dark';
 import { statusCodeDarkMode } from '@redocly/theme/components/StatusCode/variables.dark';
+import { switcherDarkMode } from '@redocly/theme/components/Switch/variables.dark';
 
 const replayDarkMode = css`
   /**
@@ -299,6 +300,8 @@ export const darkMode = css`
   ${mermaidDarkMode}
   ${scorecardDarkMode}
   ${replayDarkMode}
+  ${switcherDarkMode}
+
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/src/core/styles/global.ts

@@ -34,6 +34,7 @@ import { userMenu } from '@redocly/theme/components/UserMenu/variables';
 import { httpTag } from '@redocly/theme/components/Tags/variables';
 import { versionPicker } from '@redocly/theme/components/VersionPicker/variables';
 import { datePicker } from '@redocly/theme/components/DatePicker/variables'
+import { switcher } from '@redocly/theme/components/Switch/variables';
 
 
 const themeColors = css`
@@ -385,6 +386,7 @@ const sizeAndSpace = css`
     */
 
   --container-width: 1200px;
+  --container-max-width: 1504px;
 
   /**
     * @tokens Space
@@ -1200,6 +1202,7 @@ export const styles = css`
     ${icon}
     ${tree}
     ${segmented}
+    ${switcher}
     ${checkbox}
     ${feedback}
     ${scorecard}

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/index.ts

@@ -7,6 +7,7 @@ export * from '@redocly/theme/components/JsonViewer/JsonViewer';
 export * from '@redocly/theme/components/Tag/Tag';
 export * from '@redocly/theme/components/TableOfContent/TableOfContent';
 export * from '@redocly/theme/components/ColorModeSwitcher/ColorModeSwitcher';
+export * from '@redocly/theme/components/Switch/Switch';
 export * from '@redocly/theme/components/Select/Select';
 export * from '@redocly/theme/components/Badge/Badge';
 export * from '@redocly/theme/components/Dropdown/Dropdown';

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`