@redocly/theme 0.17.0 → 0.17.1

package/src/globalStyle.ts

@@ -878,6 +878,41 @@ const apiReferencePanels = css`
   --panel-samples-heading-background-color: #323f4b; // @presenter Color
   --panel-samples-heading-border: unset; // @presenter Border
 
+  /**
+  * @tokens Panel samples default
+  */
+  .panel-samples-default {
+    --text-color: var(--panel-samples-text-color);
+    --panel-text-color: var(--panel-samples-text-color); // @presenter Color
+    --panel-font-family-local: var(--panel-samples-font-family);
+    --panel-font-size-local: var(--panel-samples-font-size);
+    --panel-font-weight-local: var(--panel-samples-font-weight);
+    --panel-background-color: var(--panel-samples-background-color); // @presenter Color
+    --panel-border-local: var(--panel-samples-border);
+    --panel-border-radius-local: calc(1px + var(--panel-border-radius));
+    --panel-chevron-icon-color: var(--panel-samples-chevron-icon-color); // @presenter Color
+
+    --panel-body-text-color: var(--panel-samples-body-text-color); // @presenter Color
+    --panel-body-background-color: var(--panel-samples-body-background-color); // @presenter Color
+
+    --panel-body-font-family-local: var(--panel-samples-body-font-family);
+    --panel-body-font-size-local: var(--panel-samples-body-font-size);
+    --panel-body-font-weight-local: var(--panel-samples-body-font-weight);
+    --panel-body-padding-local: 0;
+    --panel-body-border-local: var(--panel-samples-body-border);
+
+    --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color
+    --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+
+    --panel-heading-font-family-local: var(--panel-samples-heading-font-family);
+    --panel-heading-font-size-local: var(--panel-samples-heading-font-size);
+    --panel-heading-font-weight-local: var(--panel-samples-heading-font-weight);
+    --panel-heading-line-height-local: var(--panel-samples-heading-line-height);
+    --panel-heading-padding-local: var(--panel-samples-heading-padding);
+
+    --panel-heading-border: var(--panel-samples-heading-border); // @presenter Border
+  }
+
   /**
   * @tokens Panel try-it, request-samples, response-samples, callback samples
   */
@@ -907,7 +942,7 @@ const apiReferencePanels = css`
     --panel-body-border-local: var(--panel-samples-body-border);
 
     --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color
-    --panel-heading-background-color: var(  --panel-samples-heading-background-color); // @presenter Color
+    --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color
 
     --panel-heading-font-family-local: var(--panel-samples-heading-font-family);
     --panel-heading-font-size-local: var(--panel-samples-heading-font-size);
@@ -1122,9 +1157,14 @@ const apiReferencePanels = css`
   * @tokens Panel samples other styles
   */
 
-  --panel-samples-controls-background-color: var(--panel-samples-heading-background-color); // @presenter Color
-  --panel-samples-controls-hover-background-color: var(--panel-samples-tabs-hover-background-color); // @presenter Color
+  --panel-samples-controls-background-color: var(--panel-samples-heading-background-color);
+
+  --panel-samples-icon-controls-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+  --panel-samples-text-controls-background-color: var(--color-secondary-900); // @presenter Color
+
+  --panel-samples-controls-hover-background-color: #606e7b; // @presenter Color
   --panel-samples-controls-text-color: var(--text-color-inverse); // @presenter Color
+  --panel-samples-controls-border: 1px solid var(--color-secondary-900); // @presenter Color
 
   --panel-samples-dropdown-background-color: var(--panel-samples-heading-background-color); // @presenter Color
   --panel-samples-dropdown-color: var(--text-color-inverse); // @presenter Color
@@ -1186,6 +1226,7 @@ const code = css`
   --code-font-size: 13px; // @presenter FontSize
   --code-font-family: var(--font-family-monospaced); // @presenter FontFamily
   --code-font-weight: 400; // @presenter FontWeight
+  --code-line-height: 18px; // @presenter LineHeight
   --code-wrap: pre;
   --code-word-break: break-word;
 
@@ -1207,7 +1248,9 @@ const code = css`
   --code-block-text-color: #fff; // @presenter Color
   --code-block-background-color: #323f4b; // @presenter Color
   --code-block-border-color: var(--border-color); // @presenter Color
-  --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --code-block-border-radius: var(--border-radius); // @presenter BorderRadius
+  --code-block-padding: calc(var(--spacing-unit) * 2);
+  --code-block-margin: 0;
   --code-block-max-height: 50vh;
   --code-block-word-break: initial;
 
@@ -1652,7 +1695,7 @@ const mobileMenu = css`
     --mobile-menu-item-text-color: #525252;// @presenter Color
     --mobile-menu-item-active-color: #FAFAFA; // @presenter Color
     --mobile-menu-item-active-text-color: #161616; // @presenter Color
-    
+
     /**
       * @tokens Mobile Menu control button
       * */
@@ -1865,7 +1908,7 @@ const markdown = css`
   /**
   * @tokens Markdown Checkbox List
   */
-  
+
   --md-checkbox-list-item-style: none;
 
   /**
@@ -2182,7 +2225,7 @@ export const styles = css`
   :root.notransition * {
     transition: none !important;
   }
-  
+
   @media screen and (max-width: ${breakpoints.medium}) {
     body.overflow-hidden {
       overflow: hidden;

package/src/icons/ArrowIcon/ArrowIcon.tsx

@@ -1,12 +1,7 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export interface ArrowIconProps {
-  direction?: 'up' | 'right' | 'left' | 'down';
-  visibility?: 'visible' | 'hidden';
-}
-
-function directionToTransform({ direction }: ArrowIconProps) {
+function directionToTransform({ direction }: { direction?: string }) {
   switch (direction) {
     case 'up':
       return 180;
@@ -19,17 +14,45 @@ function directionToTransform({ direction }: ArrowIconProps) {
   }
 }
 
-const Icon = ({ className }: { className?: string }) => (
+export interface ArrowIconProps {
+  className?: string;
+  weight?: 'regular' | 'thin';
+  direction?: 'up' | 'right' | 'left' | 'down';
+  visibility?: 'visible' | 'hidden';
+}
+
+const Icon = ({ className, weight }: ArrowIconProps) => (
   <span data-component-name="icons/ArrowIcon/ArrowIcon">
-    <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 5" className={className}>
-      <path d="M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" />
-    </svg>
+    {weight === 'thin' ? (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+      >
+        <path
+          d="M8 11L3 5.99999L3.7 5.29999L8 9.59999L12.3 5.29999L13 5.99999L8 11Z"
+          fill="inherit"
+        />
+      </svg>
+    ) : (
+      <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 5" className={className}>
+        <path d="M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" />
+      </svg>
+    )}
   </span>
 );
 
-export const ArrowIcon = styled(Icon)`
-  width: var(--sidebar-group-item-chevron-size);
-  height: var(--sidebar-group-item-chevron-size);
+export const ArrowIcon = styled(Icon)<Pick<ArrowIconProps, 'weight'>>`
+  ${({ weight }) =>
+    weight !== 'thin' &&
+    css`
+      width: var(--sidebar-group-item-chevron-size);
+      height: var(--sidebar-group-item-chevron-size);
+    `}
+
   fill: var(--sidebar-group-item-chevron-color);
   transform: rotate(${directionToTransform}deg);
   visibility: ${({ visibility = 'visible' }) => visibility};

package/src/icons/CollapseIcon/CollapseIcon.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+  color?: string;
+}
+
+const Icon = ({ className, color = 'white' }: IconProps) => (
+  <svg
+    data-component-name="icons/CollapseIcon"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clipPath="url(#clip0_906_12165)">
+      <rect width="14" height="14" fill="none" style={{ mixBlendMode: 'multiply' }} />
+      <path
+        d="M1.75 7.875V8.75H4.63138L0.875 12.5046L1.49363 13.125L5.25 9.36862V12.25H6.125V7.875H1.75Z"
+        fill={color}
+      />
+      <path
+        d="M13.125 1.4945L12.509 0.875L8.75 4.63138V1.75H7.875V6.125H12.25V5.25H9.36862L13.125 1.4945Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_906_12165">
+        <rect width="14" height="14" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const CollapseIcon = styled(Icon)`
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;

package/src/icons/CollapseIcon/index.tsx

@@ -0,0 +1 @@
+export * from '@theme/icons/CollapseIcon/CollapseIcon';

package/src/icons/CopyIcon/CopyIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+  color?: string;
+}
+
+const Icon = ({ className, color = 'white' }: IconProps) => (
+  <span data-component-name="icons/CopyIcon">
+    <svg viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M3.52083 1.33333C3.52083 1.25279 3.58613 1.1875 3.66667 1.1875H9.5C9.58054 1.1875 9.64583 1.25279 9.64583 1.33333V8.33333C9.64583 8.41387 9.58054 8.47917 9.5 8.47917H7.75H3.66667C3.58613 8.47917 3.52083 8.41387 3.52083 8.33333V3.08333V1.33333ZM2.64583 2.64583V1.33333C2.64583 0.769543 3.10288 0.3125 3.66667 0.3125H9.5C10.0638 0.3125 10.5208 0.769543 10.5208 1.33333V8.33333C10.5208 8.89712 10.0638 9.35417 9.5 9.35417H8.1875V10.6667C8.1875 10.9374 8.07995 11.1971 7.8885 11.3885C7.69706 11.5799 7.43741 11.6875 7.16667 11.6875H1.33333C1.06259 11.6875 0.802939 11.5799 0.611495 11.3885C0.420051 11.1971 0.3125 10.9374 0.3125 10.6667V3.66667C0.3125 3.39592 0.420052 3.13627 0.611495 2.94483C0.802938 2.75339 1.06259 2.64583 1.33333 2.64583H2.64583ZM7.3125 9.35417V10.6667C7.3125 10.7053 7.29713 10.7424 7.26979 10.7698C7.24244 10.7971 7.20534 10.8125 7.16667 10.8125H1.33333C1.29466 10.8125 1.25756 10.7971 1.23021 10.7698C1.20286 10.7424 1.1875 10.7053 1.1875 10.6667V3.66667C1.1875 3.62799 1.20286 3.5909 1.23021 3.56355C1.25756 3.5362 1.29466 3.52083 1.33333 3.52083H2.64583V8.33333C2.64583 8.89712 3.10288 9.35417 3.66667 9.35417H7.3125Z"
+        fill={color}
+      />
+    </svg>
+  </span>
+);
+
+export const CopyIcon = styled(Icon)`
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;

package/src/icons/CopyIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/CopyIcon/CopyIcon';

package/src/icons/DeselectIcon/DeselectIcon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+  color?: string;
+}
+
+const Icon = ({ className, color = 'white' }: IconProps) => (
+  <svg
+    data-component-name="icons/DeselectIcon"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path d="M14.4966 10.5H9.49658V11.5H14.4966V10.5Z" fill={color} />
+    <path d="M10.5 3.64746H1.5V4.64746H10.5V3.64746Z" fill={color} />
+    <path d="M10.5 6.64746H1.5V7.64746H10.5V6.64746Z" fill={color} />
+    <path d="M7.5 9.64746H1.5V10.6475H7.5V9.64746Z" fill={color} />
+  </svg>
+);
+
+export const DeselectIcon = styled(Icon)`
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;

package/src/icons/DeselectIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/DeselectIcon/DeselectIcon';

package/src/icons/ExpandIcon/ExpandIcon.tsx

@@ -1,46 +1,40 @@
 import React from 'react';
 import styled from 'styled-components';
 
-export interface ArrowIconProps {
-  direction?: 'up' | 'right' | 'left' | 'down';
-  visibility?: 'visible' | 'hidden';
+interface IconProps {
+  className?: string;
+  color?: string;
 }
 
-function directionToTransform({ direction }: ArrowIconProps) {
-  switch (direction) {
-    case 'up':
-      return 180;
-    case 'right':
-      return -90;
-    case 'left':
-      return 90;
-    default:
-      return 0;
-  }
-}
-
-const Icon = ({ className }: { className?: string }) => (
-  <span data-component-name="icons/ExpandIcon/ExpandIcon">
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
+const Icon = ({ className, color = 'white' }: IconProps) => (
+  <svg
+    data-component-name="icons/ExpandIcon"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <g clipPath="url(#clip0_906_12129)">
+      <rect width="14" height="14" fill="none" style={{ mixBlendMode: 'multiply' }} />
       <path
-        d="M8 11L3 5.99999L3.7 5.29999L8 9.59999L12.3 5.29999L13 5.99999L8 11Z"
-        fill="inherit"
+        d="M8.75 0.875V1.75H11.6314L7.875 5.50462L8.49362 6.125L12.25 2.36863V5.25H13.125V0.875H8.75Z"
+        fill={color}
       />
-    </svg>
-  </span>
+      <path
+        d="M6.125 8.4945L5.509 7.875L1.75 11.6314V8.75H0.875V13.125H5.25V12.25H2.36863L6.125 8.4945Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_906_12129">
+        <rect width="14" height="14" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
 );
 
 export const ExpandIcon = styled(Icon)`
-  fill: var(--sidebar-group-item-chevron-color);
-  transform: rotate(${directionToTransform}deg);
-  visibility: ${({ visibility = 'visible' }) => visibility};
-
+  width: 1.3em;
+  height: 1.3em;
   vertical-align: middle;
 `;

package/src/icons/FileIcon/FileIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+  color?: string;
+}
+
+const Icon = ({ className, color = 'white' }: IconProps) => (
+  <svg
+    data-component-name="icons/FileIcon"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <rect width="14" height="14" fill="none" style={{ mixBlendMode: 'multiply' }} />
+    <path
+      d="M12.85 4.65018L9.35 1.15018C9.30601 1.10132 9.25192 1.0626 9.19149 1.0367C9.13106 1.0108 9.06572 0.998339 9 1.00018H4C3.73502 1.00096 3.48112 1.10656 3.29375 1.29393C3.10638 1.4813 3.00078 1.7352 3 2.00018V14.0002C3.00078 14.2652 3.10638 14.5191 3.29375 14.7064C3.48112 14.8938 3.73502 14.9994 4 15.0002H12C12.265 14.9994 12.5189 14.8938 12.7062 14.7064C12.8936 14.5191 12.9992 14.2652 13 14.0002V5.00018C13.0018 4.93446 12.9894 4.86912 12.9635 4.80869C12.9376 4.74826 12.8989 4.69417 12.85 4.65018ZM9 2.20018L11.8 5.00018H9V2.20018ZM12 14.0002H4V2.00018H8V5.00018C8.00078 5.26515 8.10638 5.51906 8.29375 5.70642C8.48112 5.89379 8.73502 5.9994 9 6.00018H12V14.0002Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export const FileIcon = styled(Icon)`
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;

package/src/icons/FileIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/FileIcon/FileIcon';

package/src/icons/ReportIcon/ReportIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+  color?: string;
+}
+
+const Icon = ({ className, color = 'white' }: IconProps) => (
+  <svg
+    data-component-name="icons/ReportIcon"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <rect width="14" height="14" fill="none" style={{ mixBlendMode: 'multiply' }} />
+    <path
+      d="M7 8.75C6.87021 8.75 6.74333 8.78849 6.63541 8.8606C6.52749 8.93271 6.44337 9.0352 6.3937 9.15511C6.34403 9.27503 6.33104 9.40698 6.35636 9.53428C6.38168 9.66158 6.44418 9.77851 6.53596 9.87029C6.62774 9.96207 6.74467 10.0246 6.87197 10.0499C6.99927 10.0752 7.13122 10.0622 7.25114 10.0125C7.37105 9.96288 7.47354 9.87876 7.54565 9.77084C7.61776 9.66292 7.65625 9.53604 7.65625 9.40625C7.65625 9.2322 7.58711 9.06528 7.46404 8.94221C7.34097 8.81914 7.17405 8.75 7 8.75Z"
+      fill={color}
+      fillOpacity="1"
+    />
+    <path d="M7.4375 3.9375H6.5625V7.875H7.4375V3.9375Z" fill="white" fillOpacity="1" />
+    <path
+      d="M11.375 12.25H2.625C2.39302 12.2497 2.17061 12.1575 2.00658 11.9934C1.84254 11.8294 1.75027 11.607 1.75 11.375V2.625C1.75027 2.39302 1.84254 2.17061 2.00658 2.00658C2.17061 1.84254 2.39302 1.75027 2.625 1.75H11.375C11.607 1.75027 11.8294 1.84254 11.9934 2.00658C12.1575 2.17061 12.2497 2.39302 12.25 2.625V11.375C12.2497 11.607 12.1575 11.8294 11.9934 11.9934C11.8294 12.1575 11.607 12.2497 11.375 12.25ZM2.625 2.625V11.375H11.3755L11.375 2.625H2.625Z"
+      fill={color}
+      fillOpacity="1"
+    />
+  </svg>
+);
+
+export const ReportIcon = styled(Icon)`
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;

package/src/icons/ReportIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/ReportIcon/ReportIcon';

package/src/icons/SelectIcon/SelectIcon.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  className?: string;
+  color?: string;
+}
+
+const Icon = ({ className, color = 'white' }: IconProps) => (
+  <svg
+    data-component-name="icons/SelectIcon"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path d="M10.5 3.64746H1.5V4.64746H10.5V3.64746Z" fill={color} />
+    <path d="M10.5 6.64746H1.5V7.64746H10.5V6.64746Z" fill={color} />
+    <path d="M7.5 9.64746H1.5V10.6475H7.5V9.64746Z" fill={color} />
+    <path
+      d="M10.5 10.9425L9.205 9.64746L8.5 10.3525L10.5 12.3525L14.5 8.35246L13.795 7.64746L10.5 10.9425Z"
+      fill={color}
+    />
+  </svg>
+);
+
+export const SelectIcon = styled(Icon)`
+  width: 1.3em;
+  height: 1.3em;
+  vertical-align: middle;
+`;

package/src/icons/SelectIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/SelectIcon/SelectIcon';

package/src/icons/index.ts

@@ -5,7 +5,13 @@ export * from '@theme/icons/ColorModeIcon';
 export * from '@theme/icons/AnchorIcon';
 export * from '@theme/icons/ExternalIcon';
 export * from '@theme/icons/SpinnerIcon';
+export * from '@theme/icons/CollapseIcon';
+export * from '@theme/icons/CopyIcon';
+export * from '@theme/icons/DeselectIcon';
+export * from '@theme/icons/ExpandIcon';
+export * from '@theme/icons/FileIcon';
+export * from '@theme/icons/ReportIcon';
+export * from '@theme/icons/SelectIcon';
 export * from '@theme/icons/BurgerIcon';
 export * from '@theme/icons/CloseIcon';
 export * from '@theme/icons/LogoutIcon';
-export * from '@theme/icons/ExpandIcon';

package/src/layouts/Forbidden.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Button } from '@theme';
 
+import { Button } from '@theme/components/Button';
 import { useTranslate } from '@portal/hooks';
 
 export function Forbidden(): JSX.Element {

package/src/utils/highlight.ts

@@ -9,6 +9,7 @@ import 'prismjs/components/prism-go.js';
 import 'prismjs/components/prism-http.js';
 import 'prismjs/components/prism-java.js';
 import 'prismjs/components/prism-lua.js';
+import 'prismjs/components/prism-markdown.js';
 import 'prismjs/components/prism-markup-templating.js'; // dep of php
 import 'prismjs/components/prism-markup.js'; // xml
 import 'prismjs/components/prism-objectivec.js';

package/lib/components/CodeSample/CodeSample.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export type CodeSampleProps = {
-    language: string;
-    highlighted: string;
-    rawContent: string;
-    'data-source'?: string;
-    'data-hash'?: string;
-    className?: string;
-};
-export declare function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, className, }: CodeSampleProps): JSX.Element;