@redocly/theme 0.2.3 → 0.4.1

package/src/Panel/Panel.ts

@@ -3,18 +3,32 @@ import styled from 'styled-components';
 import { PanelHeader } from '@theme/Panel/PanelHeader';
 import { PanelBody } from '@theme/Panel/PanelBody';
 import { PanelComponent } from '@theme/Panel/PanelComponent';
+import { ShelfIcon } from '@theme/icons/ShelfIcon';
 
-export const Panel = styled(PanelComponent).attrs(() => ({
+export const Panel = styled(PanelComponent).attrs(({ className }) => ({
   'data-component-name': 'Panel/Panel',
+  className: className || 'panel-default',
 }))`
-  border-radius: var(--panels-border-radius);
+  background-color: var(--panel-background-color);
+  color: var(--panel-text-color);
+  font-family: var(--panel-font-family-local);
+  font-size: var(--panel-font-size-local);
+  font-weight: var(--panel-font-weight-local);
+  border: var(--panel-border-local);
+  border-radius: var(--panel-border-radius);
 
   ${PanelHeader} + ${PanelBody} {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
 
+  ${PanelHeader} {
+    ${ShelfIcon} {
+      fill: var(--panel-chevron-icon-color); // ?????
+    }
+  }
+
   &:not(:last-child) {
-    margin-bottom: 10px;
+    margin-bottom: var(--panel-gap-vertical);
   }
 `;

package/src/Panel/PanelBody.ts

@@ -24,9 +24,17 @@ export const PanelBody = styled.div.attrs(() => ({
   ${({ animate }) => animate && showPanelAnimation};
   ${({ hidden }) => hidden && 'visibility: hidden'};
 
-  border-top-left-radius: var(--panels-border-radius);
-  border-top-right-radius: var(--panels-border-radius);
-  border-bottom-right-radius: var(--panels-border-radius);
-  border-bottom-left-radius: var(--panels-border-radius);
-  background-color: var(--panels-background-color);
+  background-color: var(--panel-body-background-color);
+
+  font-family: var(--panel-body-font-family-local);
+  font-size: var(--panel-body-font-size-local);
+  font-weight: var(--panel-body-font-weight-local);
+  border: var(--panel-body-border-local);
+  padding: var(--panel-body-padding-local);
+  color: var(--panel-body-text-color);
+
+  border-top-left-radius: var(--panel-border-radius);
+  border-top-right-radius: var(--panel-border-radius);
+  border-bottom-right-radius: var(--panel-border-radius);
+  border-bottom-left-radius: var(--panel-border-radius);
 `;

package/src/Panel/PanelComponent.tsx

@@ -17,6 +17,7 @@ export interface PanelComponentProps {
   className?: string;
   header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
   onToggle?: (expanded: boolean) => void;
+  description?: React.ReactNode;
 }
 
 export function PanelComponent({
@@ -25,6 +26,7 @@ export function PanelComponent({
   className,
   children,
   onToggle,
+  description,
 }: PropsWithChildren<PanelComponentProps>): JSX.Element {
   const [isExpanded, setExpanded] = useState(expanded);
   const [animate, setAnimate] = useState(false);
@@ -54,6 +56,7 @@ export function PanelComponent({
             <InlineBox>
               <PanelHeaderTitle data-cy="title">{header}</PanelHeaderTitle>
               <ShelfIcon direction={isExpanded ? 'down' : 'right'} />
+              {description}
             </InlineBox>
           </PanelHeader>
         ))}

package/src/Panel/PanelHeader.ts

@@ -2,7 +2,7 @@ import { BaseSyntheticEvent } from 'react';
 import styled from 'styled-components';
 
 export interface PanelHeaderProps {
-  expanded: boolean;
+  expanded?: boolean;
   disabled?: boolean;
   toggle?: (e: BaseSyntheticEvent) => void;
 }
@@ -15,13 +15,20 @@ export const PanelHeader = styled.div.attrs(() => ({
   display: flex;
   align-items: center;
   justify-content: space-between;
-  white-space: nowrap;
+  white-space: var(--panel-heading-white-space-local);
+
   cursor: pointer;
 
-  border-top-left-radius: var(--panels-border-radius);
-  border-top-right-radius: var(--panels-border-radius);
-  border-bottom-right-radius: ${({ expanded }) => (expanded ? '0' : 'var(--panels-border-radius)')};
-  border-bottom-left-radius: ${({ expanded }) => (expanded ? '0' : 'var(--panels-border-radius)')};
+  line-height: var(--panel-heading-line-height-local);
+  font-size: var(--panel-heading-font-size-local);
+  padding: var(--panel-heading-padding-local);
+  border: var(--panel-heading-border);
+  background-color: var(--panel-heading-background-color);
+
+  border-top-left-radius: var(--panel-border-radius);
+  border-top-right-radius: var(--panel-border-radius);
+  border-bottom-right-radius: ${({ expanded }) => (expanded ? '0' : 'var(--panel-border-radius)')};
+  border-bottom-left-radius: ${({ expanded }) => (expanded ? '0' : 'var(--panel-border-radius)')};
 
   pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
 `;

package/src/Panel/PanelHeaderTitle.ts

@@ -3,11 +3,13 @@ import styled from 'styled-components';
 export const PanelHeaderTitle = styled.span.attrs(() => ({
   'data-component-name': 'Panel/PanelHeaderTitle',
 }))`
-  line-height: 1;
   margin-right: 5px;
-  font-weight: 700;
-  /* changed from var(--color-content-inverse) to var(--color-content)
+  font-weight: var(--panel-heading-font-weight-local);
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  /* changed from var(--text-color-inverse) to var(--text-color)
      should change several components in openapi/graphql reference-docs to use inverse color
    */
-  color: var(--color-content);
+  color: var(--panel-heading-text-color);
 `;

package/src/Panel/index.ts

@@ -1,6 +1,3 @@
-export * from '@theme/Panel/CodePanel';
-export * from '@theme/Panel/ContentPanel';
-export * from '@theme/Panel/DarkHeader';
 export * from '@theme/Panel/Panel';
 export * from '@theme/Panel/PanelBody';
 export * from '@theme/Panel/PanelComponent';

package/src/Profile/Profile.tsx

@@ -49,7 +49,7 @@ const ProfileWrapper = styled.div`
   align-items: center;
   cursor: pointer;
   width: auto;
-  padding-left: calc(var(--sidebar-spacing-horizontal) * 2);
+  padding: 0 var(--navbar-item-padding-horizontal);
 `;
 
 const StyledUserName = styled.span`

package/src/SamplesPanelControls/SamplesPanelControls.ts

@@ -5,25 +5,25 @@ import { CodeBlock } from '@theme/CodeBlock';
 export const SamplesControlButton = styled.button.attrs(() => ({
   'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
 }))`
-  background-color: var(--samples-panel-controls-background-color);
+  background-color: var(--panel-samples-controls-background-color);
   border: 0;
   outline: 0;
-  border-radius: var(--global-border-radius);
+  border-radius: var(--border-radius);
   height: 20px;
-  color: var(--color-content-inverse);
+  color: var(--panel-samples-controls-text-color);
   font-size: 12px;
   line-height: 12px;
   cursor: pointer;
   padding: 1px 6px;
   min-width: 90px;
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries?.small} {
     padding: 2px 20px;
   }
 
   :hover,
   :focus {
-    background-color: var(--samples-panel-controls-hover-background-color);
+    background-color: var(--panel-samples-controls-hover-background-color);
   }
 `;
 
@@ -43,7 +43,7 @@ export const SampleControls = styled.div`
     margin-top: 5px;
     margin-left: 10px;
 
-    ${({ theme }) => theme.mediaQueries.small} {
+    ${({ theme }) => theme.mediaQueries?.small} {
       margin-top: 0;
     }
 
@@ -64,9 +64,9 @@ export const PreformattedCodeBlock = styled(CodeBlock.withComponent('pre'))`
   margin: 0;
   font-family: var(--code-font-family);
   padding: 20px;
-  border-radius: var(--global-border-radius);
-  background-color: var(--samples-panel-controls-background-color);
-  color: var(--color-content-inverse);
+  border-radius: var(--border-radius);
+  background-color: var(--panel-samples-controls-background-color);
+  color: var(--text-color-inverse);
   font-size: var(--code-font-size);
   white-space: var(--code-wrap, pre);
 `;

package/src/Search/Autocomplete.tsx

@@ -125,5 +125,5 @@ const Overlay = styled.div`
 
 const Message = styled.div`
   padding: 24px;
-  color: var(--color-content);
+  color: var(--text-color);
 `;

package/src/Search/Input.tsx

@@ -6,7 +6,7 @@ export const FormInput = styled.input.attrs(() => ({
   padding: 1em 2.5em 1em 1em;
   background-color: var(--search-input-background-color);
   border-radius: var(--search-input-border-radius);
-  border: none;
+  border: var(--search-input-border);
   outline: none;
   color: var(--search-input-text-color);
   font-size: var(--search-input-font-size);
@@ -14,6 +14,11 @@ export const FormInput = styled.input.attrs(() => ({
   line-height: var(--search-input-line-height);
 
   ::placeholder {
-    color: var(--search-input-text-color);
+    color: var(--search-input-placeholder-color);
+  }
+
+  &:hover {
+    background-color: var(--search-input-hover-background-color);
+    border: var(--search-input-hover-border);
   }
 `;

package/src/Search/Parameters.tsx

@@ -39,7 +39,7 @@ export function Parameters({ parameters = [] }: ParametersProps): JSX.Element {
 }
 
 const Wrapper = styled.div`
-  border-left: 1px solid var(--global-border-color);
+  border-left: 1px solid var(--border-color);
   padding: 0 12px;
   margin-top: 8px;
   margin-bottom: 4px;

package/src/Search/Popover.tsx

@@ -12,9 +12,9 @@ export const Popover = styled.div.attrs(() => ({
   max-width: 90vw;
   max-height: 400px;
   overflow-y: auto;
-  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
-    0 8px 10px -5px rgba(0, 0, 0, 0.4);
-  background: var(--search-popover-backgrond-color);
+  box-shadow: var(--search-popover-shadow);
+  background: var(--search-popover-background-color);
   list-style: none;
   border-radius: var(--search-popover-border-radius);
+  border: var(--search-popover-border);
 `;

package/src/Search/Search.tsx

@@ -49,4 +49,6 @@ export function Search(): JSX.Element {
   );
 }
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+  margin: 0 auto;
+`;

package/src/Search/SearchItem.tsx

@@ -41,18 +41,31 @@ export function SearchItem({ item }: SearchItemProps): JSX.Element {
   );
 }
 
+const Title = styled.div`
+  font-weight: var(--font-weight-bold);
+  color: var(--search-item-title-text-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--line-height-base);
+`;
+
 const SearchLink = styled(Link)`
   display: block;
   text-decoration: none;
-  padding: 8px 24px;
+  padding: var(--search-item-padding);
   transition: background-color 0.3s ease;
   outline: none;
   white-space: nowrap;
   color: var(--search-item-text-color);
+  background-color: var(--search-item-background-color);
 
   &:hover,
   &:focus {
+    color: var(--search-item-active-text-color);
     background-color: var(--search-item-active-background-color);
+    ${Title} {
+      color: var(--search-item-active-title-text-color);
+    }
   }
 `;
 
@@ -64,14 +77,6 @@ const Operation = styled.div`
   text-overflow: ellipsis;
 `;
 
-const Title = styled.div`
-  font-weight: var(--font-weight-bold);
-  color: var(--search-item-title-text-color);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: var(--line-height-base);
-`;
-
 const Description = styled.div`
   font-size: var(--font-size-base);
   overflow: hidden;

package/src/Search/utils.tsx

@@ -15,5 +15,5 @@ export const highlight = (text: string | string[]): JSX.Element | string => {
 };
 
 const Strong = styled.strong`
-  color: var(--color-content);
+  color: var(--search-highlight-text-color);
 `;

package/src/Sidebar/ApiCallItem.tsx

@@ -29,4 +29,11 @@ const Wrapper = styled.div``;
 export const Badge = styled(OperationBadge)`
   flex-shrink: 0;
   margin-top: 0;
+  width: 36px;
+  height: 14px;
+  font-size: var(--sidebar-item-badge-http-font-size);
+  font-family: var(--sidebar-item-badge-http-font-family);
+  font-weight: var(--sidebar-item-badge-http-font-weight);
+  border-radius: var(--sidebar-item-badge-http-border-radius);
+  color: var(--sidebar-item-badge-http-text-color);
 `;

package/src/Sidebar/ArrowBack.tsx

@@ -18,5 +18,5 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
 );
 
 export const ArrowBack = styled(Arrow)`
-  fill: var(--sidebar-chevron-color);
+  fill: var(--sidebar-group-item-chevron-color);
 `;

package/src/Sidebar/BackButton.tsx

@@ -21,24 +21,29 @@ export function BackButton({
 
 const Button = styled.button`
   width: 100%;
-  background-color: transparent;
+  background-color: var(--sidebar-back-button-background-color);
   padding: 0;
   border: 0;
   outline: 0;
-  color: var(--color-content);
   display: flex;
   align-items: center;
   cursor: pointer;
-  font-size: var(--sidebar-font-size);
+  color: var(--sidebar-back-button-text-color);
+  font-size: var(--sidebar-back-button-font-size);
+  font-family: var(--sidebar-back-button-font-family);
+  text-transform: var(--sidebar-back-button-transform);
+
   transition: color 0.25s ease;
   text-align: left;
-  margin-bottom: calc(var(--sidebar-spacing-padding-vertical) * 3);
+  margin: var(--sidebar-back-button-margin);
 
   svg {
     margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
+    fill: var(--sidebar-back-button-icon-color);
   }
 
   &:hover {
-    color: var(--sidebar-item-color);
+    color: var(--sidebar-back-button-hover-text-color);
+    background: var(--sidebar-back-button-hover-background-color);
   }
 `;

package/src/Sidebar/Drilldown.tsx

@@ -34,9 +34,7 @@ export function Drilldown({
 const Wrapper = styled.div``;
 
 const DrilldownLabel = styled(MenuItemLabel)`
-  padding-top: calc(var(--sidebar-spacing-padding-vertical) * 2);
-  padding-bottom: calc(var(--sidebar-spacing-padding-vertical) * 2);
-  padding-left: var(--sidebar-spacing-padding-horizontal);
+  padding: var(--sidebar-item-nested-offset) var(--sidebar-item-padding-horizontal);
   font-weight: var(--font-weight-bold);
 
   &:hover {

package/src/Sidebar/DrilldownMenu.tsx

@@ -31,7 +31,7 @@ const MenuContainer = styled.div`
   bottom: 0;
   width: 100%;
   z-index: 100;
-  background-color: var(--sidebar-background-color);
+  background-color: var(--sidebar-item-drilldown-background-color);
 `;
 
 const slideInAnimation = keyframes`
@@ -52,7 +52,7 @@ const MenuContent = styled.div`
 `;
 
 const MenuWrapper = styled.div`
-  padding: var(--sidebar-spacing-padding-vertical) var(--sidebar-spacing-padding-horizontal);
+  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
   margin-bottom: calc(var(--sidebar-spacing-unit) * 3);
   word-break: break-word;
 `;

package/src/Sidebar/DrilldownMenuItem.tsx

@@ -18,23 +18,27 @@ export function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element {
 const Container = styled.div`
   display: flex;
   align-items: center;
-  color: var(--sidebar-item-color);
-  font-size: var(--sidebar-font-size);
+  color: var(--sidebar-item-drilldown-text-color);
   font-weight: var(--font-weight-bold);
+  font-size: var(--sidebar-item-drilldown-font-size);
+  font-family: var(--sidebar-item-drilldown-font-family);
+  text-transform: var(--sidebar-text-drilldown-transform);
+  background: var(--sidebar-item-drilldown-background-color);
 `;
 
 const Icon = styled.img`
-  width: calc(var(--sidebar-spacing-unit) * 4);
-  height: calc(var(--sidebar-spacing-unit) * 4);
+  width: var(--sidebar-item-icon-size);
+  height: var(--sidebar-item-icon-size);
   margin-right: var(--sidebar-spacing-unit);
-  border-radius: 50%;
+  border-radius: var(--sidebar-item-icon-border-radius);
   flex-shrink: 0;
   overflow: hidden;
 `;
 
 const SubLabel = styled.div`
   margin-top: 2px;
-  font-size: 0.85rem;
-  color: var(--color-content);
-  font-weight: var(--font-weight-regular);
+  color: var(--sidebar-item-sublabel-text-color);
+  font-weight: var(-sidebar-item-sublabel-font-weight);
+  font-size: var(--sidebar-item-sublabel-font-size);
+  font-family: var(--sidebar-item-sublabel-font-family);
 `;

package/src/Sidebar/ExternalIcon.tsx

@@ -33,5 +33,5 @@ export const ExternalIcon = styled(Icon)`
   width: 10px;
   height: 10px;
   margin-left: 5px;
-  fill: var(--sidebar-chevron-color);
+  fill: var(--sidebar-group-item-chevron-color);
 `;

package/src/Sidebar/Menu.tsx

@@ -6,6 +6,6 @@ export const Menu = styled.ul.attrs(() => ({
   padding: 0;
   margin: 0;
   list-style: none;
-  color: var(--sidebar-item-color);
+  color: var(--sidebar-item-text-color);
   position: relative;
 `;

package/src/Sidebar/MenuContainer.tsx

@@ -6,5 +6,5 @@ export const MenuContainer = styled.div.attrs(() => ({
   position: relative;
   overflow-y: auto;
   flex-grow: 1;
-  padding-top: var(--sidebar-spacing-offset-top);
+  padding-top: var(--sidebar-offset-top);
 `;

package/src/Sidebar/MenuGroup.tsx

@@ -42,12 +42,22 @@ export function MenuGroup({
 const Wrapper = styled.div``;
 
 const MenuWrapper = styled.div`
-  padding-left: var(--sidebar-spacing-offset-nesting);
+  padding-left: var(--sidebar-item-nested-offset);
 `;
 
 const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean }>`
-  padding-left: var(--sidebar-spacing-padding-horizontal);
+  padding-left: var(--sidebar-item-padding-horizontal);
   cursor: ${(props) => (props.isAlwaysExpanded ? 'default' : 'pointer')};
+  font-family: var(--sidebar-item-group-font-family);
+  font-size: var(--sidebar-item-group-font-size);
+  text-transform: var(--sidebar-text-group-transform);
+  color: var(--sidebar-item-group-text-color);
+  background: var(--sidebar-item-group-background-color);
+  ${(props) =>
+    props.active
+      ? `color: var(--sidebar-item-group-active-text-color);
+        background-color: var(--sidebar-item-group-active-background-color);`
+      : null};
 `;
 
 const MenuGroupArrow = styled(ArrowIcon)`

package/src/Sidebar/MenuItemLabel.tsx

@@ -10,17 +10,17 @@ export const MenuItemLabel = styled.li.attrs(() => ({
   word-break: break-word;
   margin-bottom: 1px;
 
-  font-family: var(--sidebar-font-family);
-  font-size: var(--sidebar-font-size);
+  background-color: var(--sidebar-item-background-color);
+  font-family: var(--sidebar-item-font-family);
+  font-size: var(--sidebar-item-font-size);
   font-weight: var(--font-weight-regular);
-  margin-left: var(--sidebar-spacing-offset-left);
-  padding: var(--sidebar-spacing-padding-vertical) var(--sidebar-spacing-padding-horizontal);
+  margin-left: var(--sidebar-offset-left);
+  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
   padding-left: calc(
-    var(--sidebar-spacing-padding-horizontal) + var(--sidebar-chevron-size) +
+    var(--sidebar-item-padding-horizontal) + var(--sidebar-group-item-chevron-size) +
       var(--sidebar-spacing-unit) * 0.5
   );
-  border-top-left-radius: var(--sidebar-border-radius);
-  border-bottom-left-radius: var(--sidebar-border-radius);
+  border-radius: var(--sidebar-item-border-radius);
 
   ${(props) =>
     props.active

package/src/Sidebar/MenuLink.tsx

@@ -6,7 +6,7 @@ export const MenuLink = styled(UniversalLink).attrs(() => ({
   'data-component-name': 'Sidebar/MenuLink',
 }))<UniversalLinkProps>`
   text-decoration: none;
-  color: var(--sidebar-item-color);
+  color: var(--sidebar-item-text-color);
 
   &&.external-url:after {
     content: none;

package/src/Sidebar/SeparatorItem.tsx

@@ -7,7 +7,11 @@ export const SeparatorItem = styled(MenuItemLabel).attrs(() => ({
 }))`
   cursor: default;
   font-weight: var(--font-weight-bold);
-  color: var(--sidebar-separator-label-color);
+  color: var(--sidebar-separator-item-color);
+  font-family: var(--sidebar-item-separator-font-family);
+  font-size: var(--sidebar-item-separator-font-size);
+  text-transform: var(--sidebar-item-separator-text-transform);
+  background: var(--sidebar-item-separator-background-color);
 
   :hover {
     color: inherit;

package/src/Sidebar/SeparatorLine.tsx

@@ -4,6 +4,6 @@ export const SeparatorLine = styled.div.attrs(() => ({
   'data-component-name': 'Sidebar/SeparatorLine',
 }))`
   height: 1px;
-  background-color: var(--sidebar-separator-line-color);
-  margin: var(--sidebar-spacing-padding-vertical) 0;
+  background-color: var(--sidebar-item-separator-line-color);
+  margin: var(--sidebar-item-padding-vertical) 0;
 `;

package/src/Sidebar/Sidebar.tsx

@@ -8,16 +8,16 @@ interface SidebarProps {
 export const Sidebar = styled.aside.attrs(() => ({
   'data-component-name': 'Sidebar/Sidebar',
 }))<SidebarProps>`
-  border-right: 1px solid var(--sidebar-right-line-color);
+  border-right: 1px solid var(--sidebar-border-color);
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2;
   background: var(--sidebar-background-color);
-  font-size: var(--sidebar-font-size);
-  font-family: var(--sidebar-font-family);
-  color: var(--sidebar-item-color);
+  font-size: var(--sidebar-item-font-size);
+  font-family: var(--sidebar-item-font-family);
+  color: var(--sidebar-item-text-color);
   top: var(--navbar-height);
   height: calc(100vh - var(--navbar-height));
   display: flex;

package/src/SidebarLogo/SidebarLogo.tsx

@@ -34,9 +34,9 @@ export function SidebarLogo({
 }
 
 const LogoImgEl = styled.img`
-  max-height: var(--logo-max-height);
-  max-width: var(--logo-max-width);
-  padding: var(--logo-padding);
+  max-height: var(--sidebar-logo-max-height);
+  max-width: var(--sidebar-logo-max-width);
+  padding: var(--sidebar-logo-padding);
   width: 100%;
   display: block;
 `;

package/src/SourceCode/SourceCode.tsx

@@ -78,11 +78,11 @@ export function SourceCode({
   // Because we don't have session storage in ssr and can't get the security details there
   // Issue for more details https://github.com/Redocly/reference-docs/issues/888
   useEffect(() => {
-    const _externalSource = externalSource?.sample?.get?.(externalSource) ?? '';
-    if (_externalSource) {
-      setSourceCode(_externalSource);
+    const _source = source || externalSource?.sample?.get?.(externalSource);
+    if (_source) {
+      setSourceCode(_source);
     }
-  }, [externalSource]);
+  }, [source, externalSource]);
 
   if (withCopyButton) {
     return (