@redocly/theme 0.18.1 → 0.18.3-patch.0

package/src/components/TableOfContent/TableOfContent.tsx

@@ -79,12 +79,13 @@ 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: uppercase;
+  text-transform: var(--toc-heading-text-transform);
 `;
 
 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);
@@ -98,7 +99,6 @@ const MenuItem = styled.a<{ depth: number }>`
   :hover,
   &.active {
     color: var(--toc-item-active-text-color);
-    background-color: var(--toc-item-active-background-color);
   }
 
   :empty {
@@ -121,7 +121,6 @@ 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 +1,2 @@
 export * from '@theme/components/TableOfContent/TableOfContent';
+export * from '@theme/components/TableOfContent/styledVariables';

package/src/components/TableOfContent/styledVariables.ts

@@ -0,0 +1,43 @@
+import { css } from 'styled-components';
+
+export const toc = css`
+  /**
+    * @tokens TOC
+    * */
+
+  --toc-width: 240px;
+  --toc-background-color: transparent;
+
+  --toc-spacing-unit: var(--spacing-xs);
+  --toc-offset-top: var(--toc-spacing-unit);
+
+  /**
+     * @tokens TOC item typography
+     */
+  --toc-item-font-family: var(--font-family-base); // @presenter FontFamily
+  --toc-item-font-size: var(--font-size-base); // @presenter FontSize
+
+  /**
+    * @tokens TOC item
+    */
+
+  --toc-item-text-color: var(--text-description); // @presenter Color
+  --toc-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --toc-item-active-text-color: var(--text-primary); // @presenter Color
+  --toc-item-background-color: transparent; // @presenter Color
+  --toc-item-nested-offset: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
+  --toc-item-padding-vertical: var(--toc-spacing-unit); // @presenter Spacing
+  --toc-item-padding-horizontal: calc(var(--toc-spacing-unit) * 2); // @presenter Spacing
+
+  /**
+    * @tokens TOC header
+    */
+
+  --toc-heading-font-size: var(--font-size-base); // @presenter FontSize
+  --toc-heading-font-family: var(--font-family-base); // @presenter FontFamily
+  --toc-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --toc-heading-text-color: var(--text-primary); // @presenter Color
+  --toc-heading-text-transform: none; // @presenter TextTransform
+
+  // @tokens End
+`;

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-color);
+      color: var(--text-primary);
     `
       : `
     &:hover {

package/src/components/Tabs/Tabs.tsx

@@ -5,7 +5,7 @@ import type { PropsWithChildren } from 'react';
 
 import { Tab } from '@theme/components/Tabs';
 
-type Child = { props: { label: string } & TabsProps };
+type Child = { props: { label: string; key?: string } & TabsProps };
 type TabsProps = PropsWithChildren<{ children: Child[]; className?: string }>;
 
 export function Tabs(props: TabsProps): JSX.Element {
@@ -16,9 +16,16 @@ export function Tabs(props: TabsProps): JSX.Element {
   return (
     <TabsContainer data-component-name="Markdown/Tabs/Tabs" className={props.className}>
       <TabList>
-        {children.map((child) => {
-          const { label } = child.props;
-          return <Tab activeTab={activeTab} key={label} label={label} onClick={onTabSelect} />;
+        {children.map((child, idx) => {
+          const { label, key } = child.props;
+          return (
+            <Tab
+              activeTab={activeTab}
+              key={`${key || label}-${idx}`}
+              label={label}
+              onClick={onTabSelect}
+            />
+          );
         })}
       </TabList>
       <TabContent>
@@ -44,7 +51,7 @@ const TabList = styled.ol`
   color: var(--md-tabs-tab-text-color);
   padding: 0;
   margin-block-end: 0;
-  border: solid var(--color-secondary-400);
+  border: solid var(--border-primary);
   border-width: 0 0 1px 0;
 
   li[class^='Tab__TabItem'] {

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type DefaultStatusColor = 'success' | 'processing' | 'error' | 'warning' | 'default';
+type ActionStatusColor = 'approved' | 'declined' | 'pending';
+type SubjectStatusColor = 'active' | 'draft' | 'deprecated';
+type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
+type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor;
+type Color =
+  | 'red'
+  | 'green'
+  | 'blue'
+  | 'grey'
+  | 'gold'
+  | 'cyan'
+  | 'magneta'
+  | 'purple'
+  | 'lime'
+  | 'geekblue'
+  | 'yellow';
+
+interface TagProps {
+  className?: string;
+  children?: React.ReactNode;
+  closable?: boolean;
+  color?: StatusColor | Color | string;
+  icon?: React.ReactNode;
+}
+
+export function Tag({ children, className, color = 'default', icon }: TagProps): JSX.Element {
+  return (
+    <TagContainer className={className} color={color}>
+      {icon ? icon : null}
+      {children}
+    </TagContainer>
+  );
+}
+
+const TagContainer = styled.div.attrs(({ className, color }: TagProps) => ({
+  'data-component-name': 'Tag/Tag',
+  className: className + ` tag-${color}`,
+}))<TagProps>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-wrap: nowrap;
+
+  padding: var(--tag-padding);
+  margin: var(--tag-margin);
+  gap: var(--tag-gap);
+
+  font-size: var(--tag-font-size);
+  font-family: var(--tag-font-family);
+  font-weight: var(--tag-font-weight);
+  line-height: var(--tag-line-height);
+  box-shadow: var(--tag-box-shadow);
+
+  color: var(--tag-color);
+  background-color: var(--tag-background-color);
+  border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);
+  border-radius: var(--tag-border-radius);
+`;

package/src/components/Tag/index.ts

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

package/src/components/Tag/styledVariables.ts

@@ -0,0 +1,127 @@
+import { css } from 'styled-components';
+
+export const tag = css`
+  /**
+    * @tokens Tag borders
+    */
+
+  --tag-border-width: 1px; //@presenter Border
+  --tag-border-style: solid; //@presenter Border
+  --tag-border-radius: var(--border-radius-xlg); // @presenter BorderRadius
+  --tag-box-shadow: none; // @presenter Shadow
+
+  /**
+    * @tokens Tag spacing
+    */
+
+  --tag-padding: 1px 8px; //@presenter Spacing
+  --tag-margin: 0 5px 0 0; //@presenter Spacing
+  --tag-gap: 5px; //@presenter Spacing
+
+  /**
+    * @tokens Tag typography
+    */
+
+  --tag-font-size: var(--font-size-sm); // @presenter FontSize
+  --tag-font-family: inherit; // @presenter FontFamily
+  --tag-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --tag-line-height: var(--line-height-sm);
+
+  /**
+    * @tokens Tag icon
+    */
+
+  --tag-icon-width: 1em; // @presenter Spacing
+  --tag-icon-height: 1em; // @presenter Spacing
+
+  /**
+    * @tokens Tag colors
+    */
+
+  .tag-grey,
+  .tag-draft,
+  .tag-schema,
+  .tag-default {
+    --tag-color: var(--text-primary); // @presenter Color
+    --tag-background-color: var(--bg-raised); // @presenter Color
+    --tag-border-color: var(--border-primary); // @presenter Color
+  }
+
+  .tag-green,
+  .tag-success,
+  .tag-approved,
+  .tag-get {
+    --tag-color: var(--color-success-base); // @presenter Color
+    --tag-background-color: var(--color-success-bg); // @presenter Color
+    --tag-border-color: var(--color-success-border); // @presenter Color
+  }
+
+  .tag-red,
+  .tag-error,
+  .tag-declined,
+  .tag-delete {
+    --tag-color: var(--color-error-base); // @presenter Color
+    --tag-background-color: var(--color-error-bg); // @presenter Color
+    --tag-border-color: var(--color-error-border); // @presenter Color
+  }
+
+  .tag-gold,
+  .tag-warning,
+  .tag-deprecated,
+  .tag-put {
+    --tag-color: var(--color-warning-base); // @presenter Color
+    --tag-background-color: var(--color-warning-bg); // @presenter Color
+    --tag-border-color: var(--color-warning-border); // @presenter Color
+  }
+
+  .tag-blue,
+  .tag-processing,
+  .tag-post {
+    --tag-color: var(--color-info-base); // @presenter Color
+    --tag-background-color: var(--color-info-bg); // @presenter Color
+    --tag-border-color: var(--color-info-border); // @presenter Color
+  }
+
+  .tag-purple,
+  .tag-head {
+    --tag-color: var(--color-purple-6); // @presenter Color
+    --tag-background-color: var(--color-purple-1); // @presenter Color
+    --tag-border-color: var(--color-purple-3); // @presenter Color
+  }
+
+  .tag-cyan,
+  .tag-option {
+    --tag-color: var(--color-cyan-6); // @presenter Color
+    --tag-background-color: var(--color-cyan-1); // @presenter Color
+    --tag-border-color: var(--color-cyan-3); // @presenter Color
+  }
+
+  .tag-yellow,
+  .tag-patch {
+    --tag-color: var(--color-yellow-6); // @presenter Color
+    --tag-background-color: var(--color-yellow-1); // @presenter Color
+    --tag-border-color: var(--color-yellow-3); // @presenter Color
+  }
+
+  .tag-geekblue,
+  .tag-link {
+    --tag-color: var(--color-geekblue-6); // @presenter Color
+    --tag-background-color: var(--color-geekblue-1); // @presenter Color
+    --tag-border-color: var(--color-geekblue-3); // @presenter Color
+  }
+
+  .tag-magneta,
+  .tag-hook {
+    --tag-color: var(--color-magneta-6); // @presenter Color
+    --tag-background-color: var(--color-magneta-1); // @presenter Color
+    --tag-border-color: var(--color-magneta-3); // @presenter Color
+  }
+
+  .tag-lime {
+    --tag-color: var(--color-lime-6); // @presenter Color
+    --tag-background-color: var(--color-lime-1); // @presenter Color
+    --tag-border-color: var(--color-lime-3); // @presenter Color
+  }
+
+  // @tokens End
+`;

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-color)'};
+  color: ${(props) => props.color || 'var(--text-base)'};
   line-height: 1.25;
   font-family: var(--font-family-base);
 `;

package/src/components/Tooltip/index.ts

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

package/src/components/Tooltip/styledVariables.ts

@@ -0,0 +1,18 @@
+import { css } from "styled-components";
+
+export const tooltip = css`
+  /**
+    * @tokens Tooltip Base
+    * @presenter Color
+    */
+
+  --tooltip-text-color: var(--text-secondary);
+  --tooltip-background-color: var(--bg-raised);
+
+  .tooltip-copy-button {
+    --tooltip-text-color: var(--text-secondaru);
+    --tooltip-background-color: var(--bg-raised);
+  }
+
+  // @tokens End
+`;

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-color)'};
+  color: ${({ color }) => color || 'var(--text-base)'};
   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 './OperationBadge';
+export * from './Tag';
 export * from './TableOfContent';
 export * from './Profile';
 export * from './ColorModeSwitcher';
@@ -25,7 +25,6 @@ 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,6 +6,7 @@ const logoConfigSchema = {
   type: 'object',
   properties: {
     image: { type: 'string' },
+    srcSet: { type: 'string' },
     altText: { type: 'string' },
     link: { type: 'string' },
     favicon: { type: 'string' },
@@ -362,7 +363,7 @@ const scorecardConfigSchema = {
 const catalogSchema = {
   type: 'object',
   additionalProperties: true,
-  required: ['slug', 'filters', 'groupByFirstFilter', 'items'],
+  required: ['slug', 'filters', 'items'],
   properties: {
     slug: { type: 'string' },
     filters: { type: 'array', items: catalogFilterSchema },