@redocly/theme 0.18.2 → 0.18.3-patch.0

package/lib/components/Tag/Tag.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+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 declare function Tag({ children, className, color, icon }: TagProps): JSX.Element;
+export {};

package/lib/components/Tag/Tag.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function Tag({ children, className, color = 'default', icon }) {
+    return (react_1.default.createElement(TagContainer, { className: className, color: color },
+        icon ? icon : null,
+        children));
+}
+exports.Tag = Tag;
+const TagContainer = styled_components_1.default.div.attrs(({ className, color }) => ({
+    'data-component-name': 'Tag/Tag',
+    className: className + ` tag-${color}`,
+})) `
+  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);
+`;
+//# sourceMappingURL=Tag.js.map

package/lib/components/Tag/index.d.ts

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

package/lib/components/Tag/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../components/Tag/Tag"), exports);
+__exportStar(require("../../components/Tag/styledVariables"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/Tag/styledVariables.d.ts

@@ -0,0 +1 @@
+export declare const tag: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Tag/styledVariables.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tag = void 0;
+const styled_components_1 = require("styled-components");
+exports.tag = (0, styled_components_1.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
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Tiles/TileText.js

@@ -12,7 +12,7 @@ exports.TileText = styled_components_1.default.span.attrs(({ 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/lib/components/Tooltip/index.d.ts

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

package/lib/components/Tooltip/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../components/Tooltip/Tooltip"), exports);
+__exportStar(require("../../components/Tooltip/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Tooltip/styledVariables.d.ts

@@ -0,0 +1 @@
+export declare const tooltip: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Tooltip/styledVariables.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tooltip = void 0;
+const styled_components_1 = require("styled-components");
+exports.tooltip = (0, styled_components_1.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
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Typography/Typography.js

@@ -9,7 +9,7 @@ exports.Typography = styled_components_1.default.div.attrs(({ className }) => ({
     'data-component-name': 'Typography/Typography',
     className,
 })) `
-  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/lib/components/index.d.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/lib/components/index.js

@@ -32,7 +32,7 @@ __exportStar(require("./OpenApiDocs/hooks/OpenApiTryItSecurityPanel"), exports);
 __exportStar(require("./Tooltip"), exports);
 __exportStar(require("./Panel"), exports);
 __exportStar(require("./Feedback"), exports);
-__exportStar(require("./OperationBadge"), exports);
+__exportStar(require("./Tag"), exports);
 __exportStar(require("./TableOfContent"), exports);
 __exportStar(require("./Profile"), exports);
 __exportStar(require("./ColorModeSwitcher"), exports);
@@ -41,7 +41,6 @@ __exportStar(require("./Markdown"), exports);
 __exportStar(require("./OpenApiDocs"), exports);
 __exportStar(require("./SidebarActions"), exports);
 __exportStar(require("./Filter"), exports);
-__exportStar(require("./Tags"), exports);
 __exportStar(require("./Tabs"), exports);
 __exportStar(require("./Menu"), exports);
 __exportStar(require("./Separator"), exports);

package/lib/config.d.ts

@@ -412,7 +412,7 @@ declare const scorecardConfigSchema: {
 declare const catalogSchema: {
     readonly type: "object";
     readonly additionalProperties: true;
-    readonly required: readonly ["slug", "filters", "groupByFirstFilter", "items"];
+    readonly required: readonly ["slug", "filters", "items"];
     readonly properties: {
         readonly slug: {
             readonly type: "string";
@@ -592,6 +592,9 @@ export declare const themeConfigSchema: {
                 readonly image: {
                     readonly type: "string";
                 };
+                readonly srcSet: {
+                    readonly type: "string";
+                };
                 readonly altText: {
                     readonly type: "string";
                 };
@@ -1662,7 +1665,7 @@ export declare const themeConfigSchema: {
                 readonly '.*': {
                     readonly type: "object";
                     readonly additionalProperties: true;
-                    readonly required: readonly ["slug", "filters", "groupByFirstFilter", "items"];
+                    readonly required: readonly ["slug", "filters", "items"];
                     readonly properties: {
                         readonly slug: {
                             readonly type: "string";
@@ -1903,6 +1906,9 @@ export declare const productThemeOverrideSchema: {
                 readonly image: {
                     readonly type: "string";
                 };
+                readonly srcSet: {
+                    readonly type: "string";
+                };
                 readonly altText: {
                     readonly type: "string";
                 };

package/lib/config.js

@@ -5,6 +5,7 @@ const logoConfigSchema = {
     type: 'object',
     properties: {
         image: { type: 'string' },
+        srcSet: { type: 'string' },
         altText: { type: 'string' },
         link: { type: 'string' },
         favicon: { type: 'string' },
@@ -321,7 +322,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 },