@redocly/theme 0.18.4-patch.1 → 0.18.5

package/src/components/SidebarActions/styled.tsx

@@ -5,7 +5,7 @@ export const ShowLeftPanelSVG = styled(() => (
   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M4.375 7L8.75 2.625L9.3625 3.2375L5.6 7L9.3625 10.7625L8.75 11.375L4.375 7Z"
-      fill="var(--text-secondary)"
+      fill="var(--color-emphasis-400)"
     />
   </svg>
 ))`
@@ -16,7 +16,7 @@ export const HideLeftPanelSVG = styled(() => (
   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M9.62495 7L5.24995 11.375L4.63745 10.7625L8.39995 7L4.63745 3.2375L5.24995 2.625L9.62495 7Z"
-      fill="var(--text-secondary)"
+      fill="var(--color-emphasis-400)"
     />
   </svg>
 ))`
@@ -30,14 +30,11 @@ export const StyledToggleRightPanelButton = styled.a`
   cursor: pointer;
   z-index: 1;
   /* Rectangle 201 */
-  border-radius: var(--border-radius-md);
-  padding: var(--spacing-xs);
-  height: var(--control-height-base);
-  width: var(--control-height-base);
-  border: 1px solid var(--border-primary);
+  border-radius: var(--border-radius);
+  padding: var(--spacing-unit);
 
   &:hover {
-    background-color: var(--sidebar-item-hover-background-color);
+    background-color: var(--sidebar-item-active-background-color);
   }
 `;
 
@@ -45,7 +42,7 @@ export const HideRightPanelSVG = styled(() => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M14 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V13C1 13.2652 1.10536 13.5196 1.29289 13.7071C1.48043 13.8946 1.73478 14 2 14H14C14.2652 14 14.5196 13.8946 14.7071 13.7071C14.8946 13.5196 15 13.2652 15 13V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2V2ZM2 3H10V13H2V3Z"
-      fill="currentColor"
+      fill="var(--color-emphasis-400)"
     />
   </svg>
 ))`
@@ -56,7 +53,7 @@ export const ShowRightPanelSVG = styled(() => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M14 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3V13C1 13.2652 1.10536 13.5196 1.29289 13.7071C1.48043 13.8946 1.73478 14 2 14H14C14.2652 14 14.5196 13.8946 14.7071 13.7071C14.8946 13.5196 15 13.2652 15 13V3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2V2ZM2 3H10V13H2V3ZM14 13H11V3H14V13Z"
-      fill="currentColor"
+      fill="var(--color-emphasis-400)"
     />
   </svg>
 ))`
@@ -69,26 +66,29 @@ export const StyledChangeViewButton = styled.a`
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  border-radius: var(--border-radius-md);
-  background: var(--bg-overlay);
+  border-radius: var(--border-radius);
   z-index: 1;
   /* Rectangle 201 */
-  padding: var(--spacing-xs);
-  height: var(--control-height-base);
-  width: var(--control-height-base);
+  padding: var(--spacing-unit);
 
   &:hover {
-    background-color: var(--sidebar-item-hover-background-color);
+    background-color: var(--sidebar-item-active-background-color);
   }
 `;
 
 export const ChangeViewSvgRow = styled(() => (
   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M1.75 2.625L12.25 2.625L12.25 1.75L1.75 1.75L1.75 2.625Z" fill="currentColor" />
-    <path d="M1.75 5.6875L12.25 5.6875L12.25 4.8125L1.75 4.8125L1.75 5.6875Z" fill="currentColor" />
+    <path
+      d="M1.75 2.625L12.25 2.625L12.25 1.75L1.75 1.75L1.75 2.625Z"
+      fill="var(--color-emphasis-400)"
+    />
+    <path
+      d="M1.75 5.6875L12.25 5.6875L12.25 4.8125L1.75 4.8125L1.75 5.6875Z"
+      fill="var(--color-emphasis-400)"
+    />
     <path
       d="M2.625 11.375L2.625 8.75L11.375 8.75L11.375 11.375L2.625 11.375ZM2.625 12.25L11.375 12.25C11.6071 12.25 11.8296 12.1578 11.9937 11.9937C12.1578 11.8296 12.25 11.6071 12.25 11.375L12.25 8.75C12.25 8.51794 12.1578 8.29538 11.9937 8.13128C11.8296 7.96719 11.6071 7.875 11.375 7.875L2.625 7.875C2.39294 7.875 2.17038 7.96719 2.00628 8.13128C1.84219 8.29538 1.75 8.51793 1.75 8.75L1.75 11.375C1.75 11.6071 1.84219 11.8296 2.00628 11.9937C2.17038 12.1578 2.39294 12.25 2.625 12.25Z"
-      fill="currentColor"
+      fill="var(--color-emphasis-400)"
     />
   </svg>
 ))`
@@ -97,14 +97,17 @@ export const ChangeViewSvgRow = styled(() => (
 
 export const ChangeViewSvgColumn = styled(() => (
   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M2.625 12.25L2.625 1.75L1.75 1.75L1.75 12.25L2.625 12.25Z" fill="currentColor" />
+    <path
+      d="M2.625 12.25L2.625 1.75L1.75 1.75L1.75 12.25L2.625 12.25Z"
+      fill="var(--color-emphasis-400)"
+    />
     <path
       d="M5.6875 12.25L5.6875 1.75L4.8125 1.75L4.8125 12.25L5.6875 12.25Z"
-      fill="currentColor"
+      fill="var(--color-emphasis-400)"
     />
     <path
       d="M11.375 11.375L8.75 11.375L8.75 2.625L11.375 2.625L11.375 11.375ZM12.25 11.375L12.25 2.625C12.25 2.39294 12.1578 2.17038 11.9937 2.00628C11.8296 1.84219 11.6071 1.75 11.375 1.75L8.75 1.75C8.51794 1.75 8.29538 1.84219 8.13128 2.00628C7.96719 2.17038 7.875 2.39294 7.875 2.625L7.875 11.375C7.875 11.6071 7.96719 11.8296 8.13128 11.9937C8.29538 12.1578 8.51794 12.25 8.75 12.25L11.375 12.25C11.6071 12.25 11.8296 12.1578 11.9937 11.9937C12.1578 11.8296 12.25 11.6071 12.25 11.375Z"
-      fill="currentColor"
+      fill="var(--color-emphasis-400)"
     />
   </svg>
 ))`
@@ -120,9 +123,9 @@ export const ControlsWrap = styled.span<{
   justify-content: ${({ isOpenapiDocs }) => (isOpenapiDocs ? 'space-between' : 'flex-end')};
   bottom: 0;
   flex-direction: row;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-unit);
   align-items: center;
-  margin-left: var(--sidebar-controls-margin-left);
+  margin-left: '15px';
   z-index: 2;
   background: var(--sidebar-background-color);
 
@@ -130,10 +133,8 @@ export const ControlsWrap = styled.span<{
     isCollapsed &&
     css`
       flex-direction: column;
-      margin-left: 0;
-      gap: var(--sidebar-controls-collapsed-gap);
-      padding: var(--sidebar-controls-collapsed-padding-vertical)
-        var(--sidebar-controls-collapsed-padding-horizontal);
+      gap: 10px;
+      padding-bottom: 10px;
     `}
 
   ${({ theme }) => css`
@@ -151,6 +152,6 @@ export const ControlsWrapChangeLayoutButtons = styled.span<{ isCollapsed?: boole
   display: flex;
   bottom: 0;
   flex-direction: ${({ isCollapsed }) => (isCollapsed ? 'column-reverse' : 'row')};
-  gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-xs)')};
+  gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-unit)')};
   align-items: center;
 `;

package/src/components/TableOfContent/TableOfContent.tsx

@@ -81,13 +81,12 @@ const TocHeader = styled.div`
   font-weight: var(--toc-heading-font-weight);
   padding: var(--toc-item-padding-vertical) var(--toc-item-padding-horizontal);
   color: var(--toc-heading-text-color);
-  text-transform: var(--toc-heading-text-transform);
+  text-transform: uppercase;
 `;
 
 const MenuItem = styled.a<{ depth: number }>`
   display: block;
   color: var(--toc-item-text-color);
-  font-weight: var(--toc-item-font-weight);
   background-color: var(--toc-item-background-color);
   cursor: pointer;
   font-size: var(--toc-item-font-size);
@@ -102,7 +101,6 @@ const MenuItem = styled.a<{ depth: number }>`
   &.active {
     color: var(--toc-item-active-text-color);
     background-color: var(--toc-item-active-background-color);
-    border-radius: var(--border-radius);
   }
 
   :empty {
@@ -125,6 +123,7 @@ const TableOfContentItems = styled.div`
   position: sticky;
   top: calc(var(--navbar-height) + var(--toc-offset-top));
   max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
+  border-left: 1px solid var(--toc-border-color);
   overflow-y: auto;
   width: var(--toc-width);
 `;

package/src/components/TableOfContent/index.ts

@@ -1,2 +1 @@
 export * from '@theme/components/TableOfContent/TableOfContent';
-export * from '@theme/components/TableOfContent/styledVariables';

package/src/components/Tabs/Tab.tsx

@@ -34,7 +34,7 @@ const TabItem = styled.li<{ active: boolean }>`
       background-color: var(--background-color);
       border: solid var(--md-tabs-active-tab-border-color);
       border-width: 0 0 1px 0;
-      color: var(--text-primary);
+      color: var(--text-color);
     `
       : `
     &:hover {

package/src/components/Tabs/Tabs.tsx

@@ -51,7 +51,7 @@ const TabList = styled.ol`
   color: var(--md-tabs-tab-text-color);
   padding: 0;
   margin-block-end: 0;
-  border: solid var(--border-primary);
+  border: solid var(--color-secondary-400);
   border-width: 0 0 1px 0;
 
   li[class^='Tab__TabItem'] {

package/src/components/Tags/Tags.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Highlight } from '@theme/ui/Highlight';
+
+export function Tags({ tags, className }: { tags: string[]; className?: string }) {
+  return (
+    <TagsWrapper className={className}>
+      {tags.map((tag) => (
+        <Tag key={tag} className={'tag-' + slug(tag)}>
+          <Highlight>{tag}</Highlight>
+        </Tag>
+      ))}
+    </TagsWrapper>
+  );
+}
+
+const TagsWrapper = styled.div`
+  margin-top: 16px;
+`;
+
+const Tag = styled.div`
+  display: inline-block;
+  background-color: #d3f4ef;
+  color: #000;
+  padding: 2px 5px;
+  border-radius: var(--border-radius);
+  margin-right: 5px;
+  margin-bottom: 5px;
+  font-size: 0.8em;
+`;
+
+// TODO: import from portal
+function slug(str: string): string {
+  return str.replace(/\s/g, '-').toLowerCase();
+}

package/src/components/Tags/index.ts

@@ -0,0 +1 @@
+export * from './Tags';

package/src/components/Tiles/ThinTile.tsx

@@ -10,20 +10,20 @@ import type { TextAlign, TileProps } from '@theme/components/Tiles/types';
 const ThinTileWrapper = styled(Link)<{ bgColor?: string; bgImage?: string }>`
   display: flex;
   flex-direction: column;
-  border-radius: var(--border-radius-lg);
+  border-radius: 10px;
+  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
   box-sizing: border-box;
-  padding: var(--spacing-lg);
+  transition: box-shadow 0.25s ease;
+  padding: 24px;
   margin-bottom: 20px;
   text-decoration: none;
   width: 100%;
-  color: var(--text-primary);
-  border: 1px solid var(--border-secondary);
   background-color: ${({ bgColor }) => bgColor || 'var(--thin-tile-background-color)'};
   background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
   background-repeat: no-repeat;
 
   :hover {
-    border-color: var(--border-primary);
+    box-shadow: 0 10px 100px 0 rgba(35, 35, 35, 0.2);
   }
 
   ${({ theme }) => theme.mediaQueries.small} {
@@ -57,12 +57,10 @@ const ThinTileIcon = styled.img`
 
 const ThinTileHeader = styled(TileHeader)<{ align?: TextAlign }>`
   font-size: 24px;
-  font-weight: var(--font-weight-bold);
   text-align: ${({ align }) => align || 'center'};
 `;
 
 const ThinTileText = styled(TileText)<{ icon?: string; align?: TextAlign }>`
-  color: var(--text-secondary);
   font-size: 18px;
   line-height: 1.5;
   flex-shrink: 0;

package/src/components/Tiles/TileHeader.ts

@@ -9,6 +9,6 @@ export const TileHeader = styled.h3.attrs<{ className?: string }>(({ className }
   color: ${(props) => props.color || 'var(--h3-color)'};
   font-family: var(--h3-font-family);
   && {
-    margin: 0 0 var(--h3-margin-bottom);
+    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
   }
 `;

package/src/components/Tiles/TileText.tsx

@@ -7,7 +7,7 @@ export const TileText = styled.span.attrs<{ className?: string }>(({ className }
   display: inline-block;
   font-weight: var(--font-weight-regular);
   overflow: hidden;
-  color: ${(props) => props.color || 'var(--text-base)'};
+  color: ${(props) => props.color || 'var(--text-color)'};
   line-height: 1.25;
   font-family: var(--font-family-base);
 `;

package/src/components/Tiles/WideTile.tsx

@@ -17,21 +17,21 @@ const WideTileWrapper = styled(Link)<{
 }>`
   display: inline-flex;
   flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
-  color: var(--text-primary);
-  border: 1px solid var(--border-secondary);
-  border-radius: var(--border-radius-lg);
+  border-radius: 10px;
+  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
   background-color: ${({ bgColor }) => bgColor || 'var(--wide-tile-background-color)'};
   background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
   background-repeat: no-repeat;
-  padding: var(--spacing-lg);
+  padding: 24px;
   padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
-  margin-bottom: var(--spacing-xl);
+  margin-bottom: 32px;
   box-sizing: border-box;
   position: relative;
   text-decoration: none;
   width: 100%;
+  transition: box-shadow 0.25s ease;
   :hover {
-    border-color: var(--border-primary);
+    box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.2);
   }
   :before {
     content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};
@@ -51,8 +51,8 @@ const WideTileWrapper = styled(Link)<{
   
   ${({ theme }) => theme.mediaQueries.medium} {
     width: calc(50% - 2em);
-    padding: var(--spacing-xl);
-    padding-right: ${({ disableArrow }) => (disableArrow ? 'var(--spacing-xl)' : '64px')};
+    padding: 32px;
+    padding-right: ${({ disableArrow }) => (disableArrow ? '32px' : '64px')};
     flex-direction: row;
     max-width: ${({ maxWidth }) => maxWidth};
   }
@@ -60,11 +60,9 @@ const WideTileWrapper = styled(Link)<{
 
 const WideTileHeader = styled(TileHeader)<{ align?: string }>`
   font-size: 24px;
-  font-weight: var(--font-weight-bold);
   text-align: ${({ align }) => align || 'left'};
 `;
 const WideTileText = styled(TileText)<{ align?: string }>`
-  color: var(--text-secondary);
   font-size: 18px;
   text-align: ${({ align }) => align || 'left'};
 `;

package/src/components/Tooltip/index.ts

@@ -1,2 +1 @@
 export * from '@theme/components/Tooltip/Tooltip';
-export * from '@theme/components/Tooltip/styledVariables';

package/src/components/Typography/SectionHeader.ts

@@ -4,9 +4,9 @@ export const SectionHeader = styled.h2.attrs<{ className?: string }>(({ classNam
   'data-component-name': 'Typography/SectionHeader',
   className,
 }))`
-  color: var(--h2-text-color);
+  color: var(--h2-color);
   font-size: var(--h2-font-size);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--h2-font-weight);
   text-align: center;
   margin: 2.65em 0;
   padding: 0 20px;

package/src/components/Typography/Typography.ts

@@ -17,7 +17,7 @@ export const Typography = styled.div.attrs<{ className?: string }>(({ className
   'data-component-name': 'Typography/Typography',
   className,
 }))<TypographyProps>`
-  color: ${({ color }) => color || 'var(--text-base)'};
+  color: ${({ color }) => color || 'var(--text-color)'};
   font-family: ${({ fontFamily }) => fontFamily || 'var(--font-family-base)'};
   font-size: ${({ fontSize }) => fontSize || 'var(--font-size-base)'};
   font-style: ${({ fontStyle }) => fontStyle};

package/src/components/index.ts

@@ -16,7 +16,7 @@ export * from './OpenApiDocs/hooks/OpenApiTryItSecurityPanel';
 export * from './Tooltip';
 export * from './Panel';
 export * from './Feedback';
-export * from './Tag';
+export * from './OperationBadge';
 export * from './TableOfContent';
 export * from './Profile';
 export * from './ColorModeSwitcher';
@@ -25,6 +25,7 @@ export * from './Markdown';
 export * from './OpenApiDocs';
 export * from './SidebarActions';
 export * from './Filter';
+export * from './Tags';
 export * from './Tabs';
 export * from './Menu';
 export * from './Separator';

package/src/config.ts

@@ -6,7 +6,6 @@ const logoConfigSchema = {
   type: 'object',
   properties: {
     image: { type: 'string' },
-    srcSet: { type: 'string' },
     altText: { type: 'string' },
     link: { type: 'string' },
     favicon: { type: 'string' },
@@ -100,6 +99,8 @@ const markdownConfigSchema = {
       type: 'object',
       properties: {
         baseUrl: { type: 'string' },
+        icon: { type: 'string' },
+        text: { type: 'string', default: 'Edit this page' },
         ...hideConfigSchema.properties,
       },
       additionalProperties: false,
@@ -232,11 +233,6 @@ const navItemSchema = {
     label: { type: 'string' },
     separator: { type: 'string' },
     separatorLine: { type: 'boolean' },
-    linePosition: {
-      type: 'string',
-      enum: ['top', 'bottom'],
-      default: 'top',
-    },
     version: { type: 'string' },
     menuStyle: { type: 'string', enum: ['drilldown' as MenuStyle] },
     expanded: { type: 'string', const: 'always' },
@@ -359,10 +355,6 @@ const catalogSchema = {
     slug: { type: 'string' },
     filters: { type: 'array', items: catalogFilterSchema },
     groupByFirstFilter: { type: 'boolean' },
-    filterValuesCasing: {
-      type: 'string',
-      enum: ['sentence', 'original', 'lowercase', 'uppercase'],
-    },
     items: navItemsSchema,
     requiredPermission: { type: 'string' },
     separateVersions: { type: 'boolean' },
@@ -406,24 +398,11 @@ export const themeConfigSchema = {
       properties: {
         items: navItemsSchema,
         copyrightText: { type: 'string' },
-        logo: hideConfigSchema,
-        ...hideConfigSchema.properties,
-      },
-      additionalProperties: false,
-    },
-    sidebar: {
-      type: 'object',
-      properties: {
-        separatorLine: { type: 'boolean' },
-        linePosition: {
-          type: 'string',
-          enum: ['top', 'bottom'],
-          default: 'bottom',
-        },
         ...hideConfigSchema.properties,
       },
       additionalProperties: false,
     },
+    sidebar: hideConfigSchema,
     scripts: {
       type: 'object',
       properties: {
@@ -711,9 +690,3 @@ export type GoogleAnalyticsConfig = FromSchema<typeof googleAnalyticsConfigSchem
 export type CatalogConfig = FromSchema<typeof catalogSchema>;
 export type CatalogFilterConfig = FromSchema<typeof catalogFilterSchema>;
 export type ScorecardConfig = FromSchema<typeof scorecardConfigSchema>;
-
-export enum ScorecardStatus {
-  BelowMinimum = 'Below minimum',
-  Highest = 'Highest',
-  Minimum = 'Minimum',
-}