@redocly/theme 0.18.2 → 0.18.3-patch.0

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 },