@redocly/theme 0.9.2 → 0.9.4

package/lib/Button/Button.js

@@ -100,7 +100,7 @@ const StyledButton = styled_components_1.default.button.attrs(({ color = 'defaul
           }
 
           &:disabled {
-            color: var(--button-disabled-background-color);
+            color: var(--button-disabled-color);
             background-color: transparent;
           }
         `

package/lib/Catalog/Catalog.js

@@ -85,7 +85,7 @@ const CatalogPageContent = styled_components_1.default.main `
 `;
 const CatalogCards = styled_components_1.default.div `
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
   gap: 32px;
 `;
 const CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `

package/lib/CopyButton/CopyButton.js

@@ -31,15 +31,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyButton = void 0;
 const react_1 = __importStar(require("react"));
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 const Button_1 = require("../Button");
 const CopyButton = ({ text, dataTestId = 'copy-button' }) => {
     const [title, setTitle] = (0, react_1.useState)('Copy');
     function write() {
         return __awaiter(this, void 0, void 0, function* () {
-            yield navigator.clipboard.writeText(text);
+            yield (0, copy_to_clipboard_1.default)(text);
             setTitle('Copied!');
             setTimeout(() => setTitle('Copy'), 1500);
         });

package/lib/Panel/PanelBody.js

@@ -42,6 +42,8 @@ exports.PanelBody = styled_components_1.default.div.attrs(() => ({
   ${({ animate }) => animate && showPanelAnimation};
   ${({ hidden }) => hidden && 'visibility: hidden'};
 
+  overflow: hidden;
+
   background-color: var(--panel-body-background-color);
 
   font-family: var(--panel-body-font-family-local);

package/lib/ReferenceDocs/DevOnboardingTryItSecurity.js

@@ -53,6 +53,7 @@ function DevOnboardingTryItSecurity(props) {
         }
         else {
             setAppId('');
+            setSelectedAppSecret('');
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.value]);
@@ -67,8 +68,13 @@ function DevOnboardingTryItSecurity(props) {
                 return res
                     .json()
                     .then((data) => {
+                    var _a;
                     if (res.ok) {
                         setApps(data.apps);
+                        if ((_a = data.apps[0]) === null || _a === void 0 ? void 0 : _a.id) {
+                            setAppId(data.apps[0].id);
+                            loadAppCredentials(data.apps[0].id);
+                        }
                     }
                     else {
                         setError(data.message);
@@ -112,7 +118,7 @@ function DevOnboardingTryItSecurity(props) {
                     setAppId(value);
                     loadAppCredentials(value);
                 } }),
-            React.createElement(UseKeyButton, { disabled: !selectedAppSecret || appLoading, color: "secondary", blinking: appLoading, onClick: () => selectedAppSecret && props.onChange(selectedAppSecret) }, "Use key"))));
+            React.createElement(UseKeyButton, { disabled: !selectedAppSecret || appLoading, color: "secondary", onClick: () => selectedAppSecret && props.onChange(selectedAppSecret) }, appLoading ? 'Loading...' : 'Use key'))));
 }
 exports.DevOnboardingTryItSecurity = DevOnboardingTryItSecurity;
 const TryItDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
@@ -152,7 +158,7 @@ const FormLabel = styled_components_1.default.label `
 const UseKeyButton = (0, styled_components_1.default)(Button_1.Button) `
   width: 100px;
   align-self: flex-end;
-  margin-top: 16px;
+  margin-top: 10px;
   margin-right: 0;
 `;
 //# sourceMappingURL=DevOnboardingTryItSecurity.js.map

package/lib/Sidebar/FooterWrapper.js

@@ -10,6 +10,11 @@ exports.FooterWrapper = styled_components_1.default.div.attrs(() => ({
 })) `
   margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
   padding-top: var(--sidebar-spacing-unit);
-  border-top: solid 1px #daddde;
+  padding-right: var(--sidebar-spacing-unit);
+  border-top: solid 1px var(--border-color);
+
+  button {
+    margin: 0;
+  }
 `;
 //# sourceMappingURL=FooterWrapper.js.map

package/lib/Sidebar/HeaderWrapper.js

@@ -10,6 +10,6 @@ exports.HeaderWrapper = styled_components_1.default.div.attrs(() => ({
 })) `
   margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
   padding-bottom: var(--sidebar-spacing-unit);
-  border-bottom: solid 1px #daddde;
+  border-bottom: solid 1px var(--border-color);
 `;
 //# sourceMappingURL=HeaderWrapper.js.map

package/lib/globalStyle.js

@@ -1093,19 +1093,19 @@ const apiReferencePanels = (0, styled_components_1.css) `
 
   --panel-try-it-action-button-width: auto;
   --panel-try-it-action-button-font-family: var(--panel-font-family); // @presenter FontFamily
-  --panel-try-it-action-button-font-weight: var(--panel-font-weight); // @presenter FontWeight
+  --panel-try-it-action-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
   --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize
   --panel-try-it-action-button-text-color: var(--text-color-inverse); // @presenter Color
   --panel-try-it-action-button-background-color: var(--color-primary-500); // @presenter Color
   --panel-try-it-action-button-border-color: transparent; // @presenter Color
 
-  --panel-try-it-action-button-active-text-color: var(--color-emphasis-900); // @presenter Color
-  --panel-try-it-action-button-active-background-color: var(--color-emphasis-700); // @presenter Color
-  --panel-try-it-action-button-active-border-color: var(--color-emphasis-700); // @presenter Color
+  --panel-try-it-action-button-active-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-try-it-action-button-active-background-color: var(--color-primary-700); // @presenter Color
+  --panel-try-it-action-button-active-border-color: var(--color-primary-700); // @presenter Color
 
-  --panel-try-it-action-button-hover-background-color: var(--color-emphasis-600); // @presenter Color
-  --panel-try-it-action-button-hover-text-color: var(--color-emphasis-800); // @presenter Color
-  --panel-try-it-action-button-hover-border-color: var(--color-emphasis-600); // @presenter Color
+  --panel-try-it-action-button-hover-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-try-it-action-button-hover-background-color: var(--color-primary-600); // @presenter Color
+  --panel-try-it-action-button-hover-border-color: var(--color-primary-600); // @presenter Color
 
   /**
   * @tokens Panel samples other styles
@@ -1889,8 +1889,8 @@ const lastUpdated = (0, styled_components_1.css) `
   --last-updated-line-height: var(--line-height-base);
 `;
 const tile = (0, styled_components_1.css) `
-  --wide-tile-background-color: var(--color-secondary-50);
-  --thin-tile-background-color: var(--color-secondary-50);
+  --wide-tile-background-color: var(--color-secondary-100);
+  --thin-tile-background-color: var(--color-secondary-100);
 `;
 const apiLogsTable = (0, styled_components_1.css) `
  --api-logs-row-hover-background-color: var(--color-secondary-300);
@@ -1984,6 +1984,7 @@ exports.styles = (0, styled_components_1.css) `
     ${modal}
 
     --api-onboarding-table-text-color: #4e5356;
+    --api-catalog-card-min-width: 250px;
 
     background-color: var(--background-color);
     color: var(--text-color);

package/lib/ui/darkColors.js

@@ -53,7 +53,7 @@ exports.darkMode = (0, styled_components_1.css) `
   --panel-try-it-nested-body-background-color: #263041;
   --panel-try-it-tabs-active-background-color: #11151d;
   --panel-try-it-tabs-hover-background-color: #141a26;
-  --color-emphasis-100: #0065fb;
+  --color-emphasis-100: #16202e;
   --color-secondary-400: #696969;
   --color-emphasis-700: #fff;
   --color-emphasis-800: #fff;

package/lib/utils/ClipboardService.d.ts

@@ -1,5 +1,5 @@
 export declare class ClipboardService {
     static isSupported(): boolean;
-    static copyCustom(text: string): Promise<void>;
+    static copyCustom(text: string): boolean;
     static selectElement(element: HTMLDivElement | null): void;
 }

package/lib/utils/ClipboardService.js

@@ -1,12 +1,16 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClipboardService = void 0;
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 class ClipboardService {
     static isSupported() {
         return typeof navigator !== 'undefined' && !!navigator.clipboard;
     }
     static copyCustom(text) {
-        return navigator.clipboard.writeText(text);
+        return (0, copy_to_clipboard_1.default)(text);
     }
     static selectElement(element) {
         if (!element) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "description": "Shared UI components lib",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -99,6 +99,7 @@
     "zod": ">=3.19.1"
   },
   "dependencies": {
+    "copy-to-clipboard": "^3.3.3",
     "highlight-words-core": "^1.2.2",
     "hotkeys-js": "^3.10.1",
     "timeago.js": "^4.0.2"

package/src/Button/Button.tsx

@@ -99,7 +99,7 @@ const StyledButton = styled.button.attrs(
           }
 
           &:disabled {
-            color: var(--button-disabled-background-color);
+            color: var(--button-disabled-color);
             background-color: transparent;
           }
         `

package/src/Catalog/Catalog.tsx

@@ -113,7 +113,7 @@ const CatalogPageContent = styled.main`
 
 const CatalogCards = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
   gap: 32px;
 `;
 

package/src/CopyButton/CopyButton.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import copy from 'copy-to-clipboard';
 
 import { Button } from '@theme/Button';
 
@@ -11,7 +12,7 @@ export const CopyButton = ({ text, dataTestId = 'copy-button' }: CopyButtonProps
   const [title, setTitle] = useState('Copy');
 
   async function write() {
-    await navigator.clipboard.writeText(text);
+    await copy(text);
 
     setTitle('Copied!');
 

package/src/Panel/PanelBody.ts

@@ -24,6 +24,8 @@ export const PanelBody = styled.div.attrs(() => ({
   ${({ animate }) => animate && showPanelAnimation};
   ${({ hidden }) => hidden && 'visibility: hidden'};
 
+  overflow: hidden;
+
   background-color: var(--panel-body-background-color);
 
   font-family: var(--panel-body-font-family-local);

package/src/ReferenceDocs/DevOnboardingTryItSecurity.tsx

@@ -32,6 +32,7 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
       setAcceptValueUpdate(false);
     } else {
       setAppId('');
+      setSelectedAppSecret('');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.value]);
@@ -49,6 +50,11 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
           .then((data: any) => {
             if (res.ok) {
               setApps(data.apps);
+
+              if (data.apps[0]?.id) {
+                setAppId(data.apps[0].id);
+                loadAppCredentials(data.apps[0].id);
+              }
             } else {
               setError(data.message);
             }
@@ -105,10 +111,9 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
         <UseKeyButton
           disabled={!selectedAppSecret || appLoading}
           color="secondary"
-          blinking={appLoading}
           onClick={() => selectedAppSecret && props.onChange(selectedAppSecret)}
         >
-          Use key
+          {appLoading ? 'Loading...' : 'Use key'}
         </UseKeyButton>
       </FormControl>
     </>
@@ -156,6 +161,6 @@ const FormLabel = styled.label<{ required?: boolean }>`
 const UseKeyButton = styled(Button)`
   width: 100px;
   align-self: flex-end;
-  margin-top: 16px;
+  margin-top: 10px;
   margin-right: 0;
 `;

package/src/Sidebar/FooterWrapper.tsx

@@ -5,5 +5,10 @@ export const FooterWrapper = styled.div.attrs(() => ({
 }))`
   margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
   padding-top: var(--sidebar-spacing-unit);
-  border-top: solid 1px #daddde;
+  padding-right: var(--sidebar-spacing-unit);
+  border-top: solid 1px var(--border-color);
+
+  button {
+    margin: 0;
+  }
 `;

package/src/Sidebar/HeaderWrapper.tsx

@@ -5,5 +5,5 @@ export const HeaderWrapper = styled.div.attrs(() => ({
 }))`
   margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
   padding-bottom: var(--sidebar-spacing-unit);
-  border-bottom: solid 1px #daddde;
+  border-bottom: solid 1px var(--border-color);
 `;

package/src/globalStyle.ts

@@ -1101,19 +1101,19 @@ const apiReferencePanels = css`
 
   --panel-try-it-action-button-width: auto;
   --panel-try-it-action-button-font-family: var(--panel-font-family); // @presenter FontFamily
-  --panel-try-it-action-button-font-weight: var(--panel-font-weight); // @presenter FontWeight
+  --panel-try-it-action-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
   --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize
   --panel-try-it-action-button-text-color: var(--text-color-inverse); // @presenter Color
   --panel-try-it-action-button-background-color: var(--color-primary-500); // @presenter Color
   --panel-try-it-action-button-border-color: transparent; // @presenter Color
 
-  --panel-try-it-action-button-active-text-color: var(--color-emphasis-900); // @presenter Color
-  --panel-try-it-action-button-active-background-color: var(--color-emphasis-700); // @presenter Color
-  --panel-try-it-action-button-active-border-color: var(--color-emphasis-700); // @presenter Color
+  --panel-try-it-action-button-active-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-try-it-action-button-active-background-color: var(--color-primary-700); // @presenter Color
+  --panel-try-it-action-button-active-border-color: var(--color-primary-700); // @presenter Color
 
-  --panel-try-it-action-button-hover-background-color: var(--color-emphasis-600); // @presenter Color
-  --panel-try-it-action-button-hover-text-color: var(--color-emphasis-800); // @presenter Color
-  --panel-try-it-action-button-hover-border-color: var(--color-emphasis-600); // @presenter Color
+  --panel-try-it-action-button-hover-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-try-it-action-button-hover-background-color: var(--color-primary-600); // @presenter Color
+  --panel-try-it-action-button-hover-border-color: var(--color-primary-600); // @presenter Color
 
   /**
   * @tokens Panel samples other styles
@@ -1913,8 +1913,8 @@ const lastUpdated = css`
 `;
 
 const tile = css`
-  --wide-tile-background-color: var(--color-secondary-50);
-  --thin-tile-background-color: var(--color-secondary-50);
+  --wide-tile-background-color: var(--color-secondary-100);
+  --thin-tile-background-color: var(--color-secondary-100);
 `;
 
 const apiLogsTable = css`
@@ -2012,6 +2012,7 @@ export const styles = css`
     ${modal}
 
     --api-onboarding-table-text-color: #4e5356;
+    --api-catalog-card-min-width: 250px;
 
     background-color: var(--background-color);
     color: var(--text-color);

package/src/ui/darkColors.tsx

@@ -51,7 +51,7 @@ export const darkMode = css`
   --panel-try-it-nested-body-background-color: #263041;
   --panel-try-it-tabs-active-background-color: #11151d;
   --panel-try-it-tabs-hover-background-color: #141a26;
-  --color-emphasis-100: #0065fb;
+  --color-emphasis-100: #16202e;
   --color-secondary-400: #696969;
   --color-emphasis-700: #fff;
   --color-emphasis-800: #fff;

package/src/utils/ClipboardService.ts

@@ -1,10 +1,11 @@
+import copy from 'copy-to-clipboard';
 export class ClipboardService {
   static isSupported(): boolean {
     return typeof navigator !== 'undefined' && !!navigator.clipboard;
   }
 
-  static copyCustom(text: string): Promise<void> {
-    return navigator.clipboard.writeText(text);
+  static copyCustom(text: string): boolean {
+    return copy(text);
   }
 
   static selectElement(element: HTMLDivElement | null): void {