@redocly/theme 0.37.3 → 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/JsonViewer/JsonViewer.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import type { CodeBlockControlsProps } from '../../components/CodeBlock/CodeBlockControls';
 export type JsonProps = {
+    title?: CodeBlockControlsProps['title'];
     data: any;
     className?: string;
     expandLevel: number;

package/lib/components/JsonViewer/JsonViewer.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
 const helpers_1 = require("./helpers");
-function JsonComponent({ data, expandLevel = 1, className, onCopyClick }) {
+function JsonComponent({ data, expandLevel = 1, className, onCopyClick, title, }) {
     const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
     const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
     const expandAll = () => {
@@ -49,6 +49,7 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick }) {
     const source = JSON.stringify(data, null, 2);
     return (react_1.default.createElement(exports.JsonViewerWrap, { "data-testid": "json-viewer", "data-component-name": "JsonViewer/JsonViewer", className: className },
         react_1.default.createElement(CodeBlock_1.CodeBlock, { header: {
+                title,
                 className: 'code-block-header',
                 controls: {
                     copy: { data, onClick: onCopyClick, handleOutside: true },

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

@@ -678,15 +678,6 @@ const apiReferenceDocs = (0, styled_components_1.css) `
   --schema-recursive-bg-color: var(--color-persian-green-6); // @presenter Color
   --schema-recursive-border-color: var(--schema-recursive-bg-color); // @presenter Color
 
-  /**
-    * @tokens GraphQL Docs Reference Schema Non null label
-    * @presenter Color
-    */
-
-  --schema-non-null-text-color: var(--schema-inline-code-text-color);
-  --schema-non-null-bg-color: var(--schema-inline-bg-color);
-  --schema-non-null-border-color: var(--schema-inline-border-color);
-
   /**
     * @tokens API Reference Schema Nested styles
     */
@@ -1113,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}
@@ -1170,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.3",
+  "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/JsonViewer/JsonViewer.tsx

@@ -1,11 +1,14 @@
 import React, { memo } from 'react';
 import styled from 'styled-components';
 
+import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
+
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
 import { JsonValue } from './helpers';
 
 export type JsonProps = {
+  title?: CodeBlockControlsProps['title'];
   data: any;
   className?: string;
   expandLevel: number;
@@ -13,7 +16,13 @@ export type JsonProps = {
   onCopyClick?: () => void;
 };
 
-function JsonComponent({ data, expandLevel = 1, className, onCopyClick }: JsonProps): JSX.Element {
+function JsonComponent({
+  data,
+  expandLevel = 1,
+  className,
+  onCopyClick,
+  title,
+}: JsonProps): JSX.Element {
   const showFoldingButtons =
     data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
 
@@ -43,6 +52,7 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick }: JsonPr
     >
       <CodeBlock
         header={{
+          title,
           className: 'code-block-header',
           controls: {
             copy: { data, onClick: onCopyClick, handleOutside: true },

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

@@ -685,15 +685,6 @@ const apiReferenceDocs = css`
   --schema-recursive-bg-color: var(--color-persian-green-6); // @presenter Color
   --schema-recursive-border-color: var(--schema-recursive-bg-color); // @presenter Color
 
-  /**
-    * @tokens GraphQL Docs Reference Schema Non null label
-    * @presenter Color
-    */
-
-  --schema-non-null-text-color: var(--schema-inline-code-text-color);
-  --schema-non-null-bg-color: var(--schema-inline-bg-color);
-  --schema-non-null-border-color: var(--schema-inline-border-color);
-
   /**
     * @tokens API Reference Schema Nested styles
     */
@@ -1135,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}
@@ -1192,6 +1204,7 @@ export const styles = css`
     ${feedback}
     ${scorecard}
     ${datePicker}
+    ${replay}
     --api-catalog-card-min-width: 250px;
 
     background-color: var(--bg-color);