@redocly/theme 0.37.4 → 0.37.6

package/lib/components/Buttons/EditPageButton.js

@@ -13,7 +13,7 @@ function EditPageButton({ to }) {
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
-    return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton", to: to, onClick: () => telemetry.send('edit_page_link_clicked', {}) },
+    return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton", target: "_blank", to: to, onClick: () => telemetry.send('edit_page_link_clicked', {}) },
         react_1.default.createElement(ButtonIcon, null),
         react_1.default.createElement(ButtonText, { "data-translation-key": "theme.markdown.editPage.text" }, translate('theme.markdown.editPage.text', 'Edit'))));
 }

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.js

@@ -16,7 +16,7 @@ function ColorModeSwitcher({ className }) {
     if (isSwitcherHidden) {
         return null;
     }
-    return (react_1.default.createElement(Button_1.Button, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", "data-testid": "color-mode-switcher", onClick: () => setActiveColorMode(switchColorMode()), extraClass: className, variant: "text", size: "medium", icon: react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: activeColorMode }) }));
+    return (react_1.default.createElement(Button_1.Button, { "data-component-name": "ColorModeSwitcher/ColorModeSwitcher", "data-testid": "color-mode-switcher", onClick: () => setActiveColorMode(switchColorMode()), extraClass: className, variant: "secondary", size: "medium", icon: react_1.default.createElement(ColorModeIcon_1.ColorModeIcon, { mode: activeColorMode }) }));
 }
 exports.ColorModeSwitcher = ColorModeSwitcher;
 //# sourceMappingURL=ColorModeSwitcher.js.map

package/lib/components/LanguagePicker/LanguagePicker.js

@@ -20,7 +20,7 @@ function LanguagePicker(props) {
     if (locales.length < 2 || !currentLocale) {
         return null;
     }
-    const languagePickerButton = (react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(GlobalOutlinedIcon_1.GlobalOutlinedIcon, { color: "--button-content-color" }), variant: "text", size: "medium" }));
+    const languagePickerButton = (react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(GlobalOutlinedIcon_1.GlobalOutlinedIcon, { color: "--button-content-color" }), variant: "secondary", size: "medium" }));
     const languageItems = locales.map((locale) => ({
         content: locale.name || locale.code || '',
         onAction: () => {

package/lib/components/Menu/MenuItem.js

@@ -167,6 +167,13 @@ const MenuItemLabelWrapper = styled_components_1.default.li `
       color: ${deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
 
+      ${ChevronDownIcon_1.ChevronDownIcon} path {
+        fill: var(--menu-item-color-active);
+      }
+      ${ChevronRightIcon_1.ChevronRightIcon} path {
+        fill: var(--menu-item-color-active);
+      }
+
       &:hover {
         background: var(--menu-item-bg-color-active);
       }
@@ -184,11 +191,25 @@ const MenuItemLabelWrapper = styled_components_1.default.li `
   &:hover {
     color: var(--menu-item-color-hover);
     background: var(--menu-item-bg-color-hover);
+
+    ${ChevronDownIcon_1.ChevronDownIcon} path {
+      fill: var(--menu-item-color-hover);
+    }
+    ${ChevronRightIcon_1.ChevronRightIcon} path {
+      fill: var(--menu-item-color-hover);
+    }
   }
 
   &:active {
     color: var(--menu-item-color-active);
     background: var(--menu-item-bg-color-active);
+
+    ${ChevronDownIcon_1.ChevronDownIcon} path {
+      fill: var(--menu-item-color-active);
+    }
+    ${ChevronRightIcon_1.ChevronRightIcon} path {
+      fill: var(--menu-item-color-active);
+    }
   }
 
   &:empty {

package/lib/components/Navbar/Navbar.js

@@ -88,7 +88,7 @@ const NavbarRow = styled_components_1.default.div `
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  gap: var(--navbar-menu-items-gap);
+  gap: 8px;
   max-width: var(--navbar-container-max-width);
 `;
 const MobileMenuButton = (0, styled_components_1.default)(Button_1.Button) `

package/lib/components/UserMenu/LoginButton.js

@@ -12,7 +12,7 @@ function LoginButton({ href, className }) {
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
     return (react_1.default.createElement("div", { "data-component-name": "UserMenu/LoginButton", className: className },
-        react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.userMenu.login", to: href, onClick: () => telemetry.send('login_button_clicked', {}), "data-testid": "login-btn", extraClass: className, variant: "secondary", size: "medium" }, translate('theme.userMenu.login', 'Login'))));
+        react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.userMenu.login", to: href, onClick: () => telemetry.send('login_button_clicked', {}), "data-testid": "login-btn", extraClass: className, variant: "primary", size: "medium" }, translate('theme.userMenu.login', 'Login'))));
 }
 exports.LoginButton = LoginButton;
 //# sourceMappingURL=LoginButton.js.map

package/lib/core/hooks/feedback/use-report-dialog.js

@@ -16,7 +16,7 @@ function useReportDialog() {
     const hideReportDialog = () => {
         setTimeout(function () {
             setIsReportDialogShown(false);
-        }, 1000);
+        }, 3000);
     };
     const closeReportDialog = () => {
         setIsReportDialogShown(false);

package/lib/core/styles/dark.js

@@ -10,6 +10,18 @@ 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 replayDarkMode = (0, styled_components_1.css) `
+  /**
+    * @tokens Replay Colors
+    * @presenter Color
+    */
+
+  --replay-undefined-variable-bg-color: rgba(249, 49, 109, 0.18); // @presenter Color
+  --replay-defined-variable-bg-color: rgba(31, 124, 255, 0.18); // @presenter Color
+  --replay-server-variable-bg-color: rgba(119, 45, 240, 0.2); // @presenter Color
+
+  // @tokens End
+`;
 exports.darkMode = (0, styled_components_1.css) `
   /* === Dark Theme Colors  === */
 
@@ -286,6 +298,7 @@ exports.darkMode = (0, styled_components_1.css) `
   ${variables_dark_3.menuDarkMode}
   ${variables_dark_2.mermaidDarkMode}
   ${variables_dark_1.scorecardDarkMode}
+  ${replayDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/lib/core/styles/global.js

@@ -1104,6 +1104,26 @@ const tree = (0, styled_components_1.css) `
 
   // @tokens End
 `;
+const replay = (0, styled_components_1.css) `
+  /**
+    * @tokens Replay Colors
+    * @presenter Color
+    */
+
+  --replay-undefined-variable-color: var(--color-raspberry-6); // @presenter Color
+  --replay-defined-variable-color: var(--color-blue-6); // @presenter Color
+  --replay-server-variable-color: var(--color-purple-6); // @presenter Color
+
+  --replay-undefined-variable-bg-color: rgba(249, 49, 109, 0.08); // @presenter Color
+  --replay-defined-variable-bg-color: rgba(31, 124, 255, 0.08); // @presenter Color
+  --replay-server-variable-bg-color: rgba(119, 45, 240, 0.08); // @presenter Color
+
+  --replay-undefined-variable-bg-color-hover: var(--color-raspberry-2); // @presenter Color
+  --replay-defined-variable-bg-color-hover: var(--color-blue-2); // @presenter Color
+  --replay-server-variable-bg-color-hover: var(--color-purple-2); // @presenter Color
+
+  // @tokens End
+`;
 exports.styles = (0, styled_components_1.css) `
   :root {
     ${variables_15.admonition}
@@ -1161,6 +1181,7 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_3.feedback}
     ${variables_2.scorecard}
     ${variables_33.datePicker}
+    ${replay}
     --api-catalog-card-min-width: 250px;
 
     background-color: var(--bg-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.37.4",
+  "version": "0.37.6",
   "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.0"
+    "@redocly/config": "0.6.1"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Buttons/EditPageButton.tsx

@@ -17,6 +17,7 @@ export function EditPageButton({ to }: EditPageButtonProps): JSX.Element {
   return (
     <EditPageButtonWrapper
       data-component-name="Buttons/EditPageButton"
+      target="_blank"
       to={to}
       onClick={() => telemetry.send('edit_page_link_clicked', {})}
     >

package/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -26,7 +26,7 @@ export function ColorModeSwitcher({ className }: ColorModeSwitcherProps): JSX.El
       data-testid="color-mode-switcher"
       onClick={() => setActiveColorMode(switchColorMode())}
       extraClass={className}
-      variant="text"
+      variant="secondary"
       size="medium"
       icon={<ColorModeIcon mode={activeColorMode} />}
     />

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -28,7 +28,7 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
   const languagePickerButton = (
     <Button
       icon={<GlobalOutlinedIcon color="--button-content-color" />}
-      variant="text"
+      variant="secondary"
       size="medium"
     />
   );

package/src/components/Menu/MenuItem.tsx

@@ -236,6 +236,13 @@ const MenuItemLabelWrapper = styled.li<{
       color: ${deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
 
+      ${ChevronDownIcon} path {
+        fill: var(--menu-item-color-active);
+      }
+      ${ChevronRightIcon} path {
+        fill: var(--menu-item-color-active);
+      }
+
       &:hover {
         background: var(--menu-item-bg-color-active);
       }
@@ -254,11 +261,25 @@ const MenuItemLabelWrapper = styled.li<{
   &:hover {
     color: var(--menu-item-color-hover);
     background: var(--menu-item-bg-color-hover);
+
+    ${ChevronDownIcon} path {
+      fill: var(--menu-item-color-hover);
+    }
+    ${ChevronRightIcon} path {
+      fill: var(--menu-item-color-hover);
+    }
   }
 
   &:active {
     color: var(--menu-item-color-active);
     background: var(--menu-item-bg-color-active);
+
+    ${ChevronDownIcon} path {
+      fill: var(--menu-item-color-active);
+    }
+    ${ChevronRightIcon} path {
+      fill: var(--menu-item-color-active);
+    }
   }
 
   &:empty {

package/src/components/Navbar/Navbar.tsx

@@ -107,7 +107,7 @@ const NavbarRow = styled.div`
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  gap: var(--navbar-menu-items-gap);
+  gap: 8px;
   max-width: var(--navbar-container-max-width);
 `;
 

package/src/components/UserMenu/LoginButton.tsx

@@ -21,7 +21,7 @@ export function LoginButton({ href, className }: LoginButtonProps): JSX.Element
         onClick={() => telemetry.send('login_button_clicked', {})}
         data-testid="login-btn"
         extraClass={className}
-        variant="secondary"
+        variant="primary"
         size="medium"
       >
         {translate('theme.userMenu.login', 'Login')}

package/src/core/hooks/feedback/use-report-dialog.ts

@@ -29,7 +29,7 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
   const hideReportDialog = () => {
     setTimeout(function () {
       setIsReportDialogShown(false);
-    }, 1000);
+    }, 3000);
   };
   const closeReportDialog = () => {
     setIsReportDialogShown(false);

package/src/core/styles/dark.ts

@@ -9,6 +9,19 @@ import { checkboxDarkMode } from '@redocly/theme/icons/CheckboxIcon/variables.da
 import { tagDarkMode } from '@redocly/theme/components/Tag/variables.dark';
 import { statusCodeDarkMode } from '@redocly/theme/components/StatusCode/variables.dark';
 
+const replayDarkMode = css`
+  /**
+    * @tokens Replay Colors
+    * @presenter Color
+    */
+
+  --replay-undefined-variable-bg-color: rgba(249, 49, 109, 0.18); // @presenter Color
+  --replay-defined-variable-bg-color: rgba(31, 124, 255, 0.18); // @presenter Color
+  --replay-server-variable-bg-color: rgba(119, 45, 240, 0.2); // @presenter Color
+
+  // @tokens End
+`;
+
 export const darkMode = css`
   /* === Dark Theme Colors  === */
 
@@ -285,6 +298,7 @@ export const darkMode = css`
   ${menuDarkMode}
   ${mermaidDarkMode}
   ${scorecardDarkMode}
+  ${replayDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/src/core/styles/global.ts

@@ -1126,6 +1126,27 @@ const tree = css`
   // @tokens End
 `;
 
+const replay = css`
+  /**
+    * @tokens Replay Colors
+    * @presenter Color
+    */
+
+  --replay-undefined-variable-color: var(--color-raspberry-6); // @presenter Color
+  --replay-defined-variable-color: var(--color-blue-6); // @presenter Color
+  --replay-server-variable-color: var(--color-purple-6); // @presenter Color
+
+  --replay-undefined-variable-bg-color: rgba(249, 49, 109, 0.08); // @presenter Color
+  --replay-defined-variable-bg-color: rgba(31, 124, 255, 0.08); // @presenter Color
+  --replay-server-variable-bg-color: rgba(119, 45, 240, 0.08); // @presenter Color
+
+  --replay-undefined-variable-bg-color-hover: var(--color-raspberry-2); // @presenter Color
+  --replay-defined-variable-bg-color-hover: var(--color-blue-2); // @presenter Color
+  --replay-server-variable-bg-color-hover: var(--color-purple-2); // @presenter Color
+
+  // @tokens End
+`;
+
 export const styles = css`
   :root {
     ${admonition}
@@ -1183,6 +1204,7 @@ export const styles = css`
     ${feedback}
     ${scorecard}
     ${datePicker}
+    ${replay}
     --api-catalog-card-min-width: 250px;
 
     background-color: var(--bg-color);