@redocly/theme 0.0.0-cache-perf-20240625144418 → 0.0.0-cache-perf-20240626070422

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

@@ -16,9 +16,9 @@ const replayDarkMode = (0, styled_components_1.css) `
     * @presenter Color
     */
 
-  --replay-undefined-variable-color: rgba(249, 49, 109, 0.18); // @presenter Color
-  --replay-defined-variable-color: rgba(31, 124, 255, 0.18); // @presenter Color
-  --replay-server-variable-color: rgba(119, 45, 240, 0.2); // @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
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.0.0-cache-perf-20240625144418",
+  "version": "0.0.0-cache-perf-20240626070422",
   "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.0.0-cache-perf-20240625144418"
+    "@redocly/config": "0.0.0-cache-perf-20240626070422"
   },
   "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

@@ -15,9 +15,9 @@ const replayDarkMode = css`
     * @presenter Color
     */
 
-  --replay-undefined-variable-color: rgba(249, 49, 109, 0.18); // @presenter Color
-  --replay-defined-variable-color: rgba(31, 124, 255, 0.18); // @presenter Color
-  --replay-server-variable-color: rgba(119, 45, 240, 0.2); // @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
 `;