@redocly/theme 0.18.3-patch.8 → 0.18.4

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' },
@@ -254,11 +253,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' },
@@ -381,10 +375,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' },
@@ -428,24 +418,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: {
@@ -733,9 +710,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',
-}