@redocly/theme 0.18.3-patch.0 → 0.18.3-patch.2

package/lib/config.d.ts

@@ -458,6 +458,10 @@ declare const catalogSchema: {
         readonly groupByFirstFilter: {
             readonly type: "boolean";
         };
+        readonly filterValuesCasing: {
+            readonly type: "string";
+            readonly enum: readonly ["sentence"];
+        };
         readonly items: {
             readonly type: "array";
             readonly items: {
@@ -485,6 +489,11 @@ declare const catalogSchema: {
                                 readonly separatorLine: {
                                     readonly type: "boolean";
                                 };
+                                readonly linePosition: {
+                                    readonly type: "string";
+                                    readonly enum: readonly ["top", "bottom"];
+                                    readonly default: "top";
+                                };
                                 readonly version: {
                                     readonly type: "string";
                                 };
@@ -529,6 +538,11 @@ declare const catalogSchema: {
                     readonly separatorLine: {
                         readonly type: "boolean";
                     };
+                    readonly linePosition: {
+                        readonly type: "string";
+                        readonly enum: readonly ["top", "bottom"];
+                        readonly default: "top";
+                    };
                     readonly version: {
                         readonly type: "string";
                     };
@@ -640,6 +654,11 @@ export declare const themeConfigSchema: {
                                         readonly separatorLine: {
                                             readonly type: "boolean";
                                         };
+                                        readonly linePosition: {
+                                            readonly type: "string";
+                                            readonly enum: readonly ["top", "bottom"];
+                                            readonly default: "top";
+                                        };
                                         readonly version: {
                                             readonly type: "string";
                                         };
@@ -684,6 +703,11 @@ export declare const themeConfigSchema: {
                             readonly separatorLine: {
                                 readonly type: "boolean";
                             };
+                            readonly linePosition: {
+                                readonly type: "string";
+                                readonly enum: readonly ["top", "bottom"];
+                                readonly default: "top";
+                            };
                             readonly version: {
                                 readonly type: "string";
                             };
@@ -766,6 +790,11 @@ export declare const themeConfigSchema: {
                                         readonly separatorLine: {
                                             readonly type: "boolean";
                                         };
+                                        readonly linePosition: {
+                                            readonly type: "string";
+                                            readonly enum: readonly ["top", "bottom"];
+                                            readonly default: "top";
+                                        };
                                         readonly version: {
                                             readonly type: "string";
                                         };
@@ -810,6 +839,11 @@ export declare const themeConfigSchema: {
                             readonly separatorLine: {
                                 readonly type: "boolean";
                             };
+                            readonly linePosition: {
+                                readonly type: "string";
+                                readonly enum: readonly ["top", "bottom"];
+                                readonly default: "top";
+                            };
                             readonly version: {
                                 readonly type: "string";
                             };
@@ -849,6 +883,14 @@ export declare const themeConfigSchema: {
                 readonly hide: {
                     readonly type: "boolean";
                 };
+                readonly separatorLine: {
+                    readonly type: "boolean";
+                };
+                readonly linePosition: {
+                    readonly type: "string";
+                    readonly enum: readonly ["top", "bottom"];
+                    readonly default: "bottom";
+                };
             };
             readonly additionalProperties: false;
         };
@@ -1711,6 +1753,10 @@ export declare const themeConfigSchema: {
                         readonly groupByFirstFilter: {
                             readonly type: "boolean";
                         };
+                        readonly filterValuesCasing: {
+                            readonly type: "string";
+                            readonly enum: readonly ["sentence"];
+                        };
                         readonly items: {
                             readonly type: "array";
                             readonly items: {
@@ -1738,6 +1784,11 @@ export declare const themeConfigSchema: {
                                                 readonly separatorLine: {
                                                     readonly type: "boolean";
                                                 };
+                                                readonly linePosition: {
+                                                    readonly type: "string";
+                                                    readonly enum: readonly ["top", "bottom"];
+                                                    readonly default: "top";
+                                                };
                                                 readonly version: {
                                                     readonly type: "string";
                                                 };
@@ -1782,6 +1833,11 @@ export declare const themeConfigSchema: {
                                     readonly separatorLine: {
                                         readonly type: "boolean";
                                     };
+                                    readonly linePosition: {
+                                        readonly type: "string";
+                                        readonly enum: readonly ["top", "bottom"];
+                                        readonly default: "top";
+                                    };
                                     readonly version: {
                                         readonly type: "string";
                                     };
@@ -1954,6 +2010,11 @@ export declare const productThemeOverrideSchema: {
                                         readonly separatorLine: {
                                             readonly type: "boolean";
                                         };
+                                        readonly linePosition: {
+                                            readonly type: "string";
+                                            readonly enum: readonly ["top", "bottom"];
+                                            readonly default: "top";
+                                        };
                                         readonly version: {
                                             readonly type: "string";
                                         };
@@ -1998,6 +2059,11 @@ export declare const productThemeOverrideSchema: {
                             readonly separatorLine: {
                                 readonly type: "boolean";
                             };
+                            readonly linePosition: {
+                                readonly type: "string";
+                                readonly enum: readonly ["top", "bottom"];
+                                readonly default: "top";
+                            };
                             readonly version: {
                                 readonly type: "string";
                             };
@@ -2061,6 +2127,11 @@ export declare const productThemeOverrideSchema: {
                                         readonly separatorLine: {
                                             readonly type: "boolean";
                                         };
+                                        readonly linePosition: {
+                                            readonly type: "string";
+                                            readonly enum: readonly ["top", "bottom"];
+                                            readonly default: "top";
+                                        };
                                         readonly version: {
                                             readonly type: "string";
                                         };
@@ -2105,6 +2176,11 @@ export declare const productThemeOverrideSchema: {
                             readonly separatorLine: {
                                 readonly type: "boolean";
                             };
+                            readonly linePosition: {
+                                readonly type: "string";
+                                readonly enum: readonly ["top", "bottom"];
+                                readonly default: "top";
+                            };
                             readonly version: {
                                 readonly type: "string";
                             };
@@ -2144,6 +2220,14 @@ export declare const productThemeOverrideSchema: {
                 readonly hide: {
                     readonly type: "boolean";
                 };
+                readonly separatorLine: {
+                    readonly type: "boolean";
+                };
+                readonly linePosition: {
+                    readonly type: "string";
+                    readonly enum: readonly ["top", "bottom"];
+                    readonly default: "bottom";
+                };
             };
             readonly additionalProperties: false;
         };

package/lib/config.js

@@ -225,6 +225,11 @@ 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'] },
         expanded: { type: 'string', const: 'always' },
@@ -327,6 +332,7 @@ const catalogSchema = {
         slug: { type: 'string' },
         filters: { type: 'array', items: catalogFilterSchema },
         groupByFirstFilter: { type: 'boolean' },
+        filterValuesCasing: { type: 'string', enum: ['sentence'] },
         items: navItemsSchema,
         requiredPermission: { type: 'string' },
         separateVersions: { type: 'boolean' },
@@ -365,7 +371,15 @@ exports.themeConfigSchema = {
             properties: Object.assign({ items: navItemsSchema, copyrightText: { type: 'string' } }, hideConfigSchema.properties),
             additionalProperties: false,
         },
-        sidebar: hideConfigSchema,
+        sidebar: {
+            type: 'object',
+            properties: Object.assign({ separatorLine: { type: 'boolean' }, linePosition: {
+                    type: 'string',
+                    enum: ['top', 'bottom'],
+                    default: 'bottom',
+                } }, hideConfigSchema.properties),
+            additionalProperties: false,
+        },
         scripts: {
             type: 'object',
             properties: {

package/lib/globalStyle.js

@@ -24,6 +24,8 @@ const Profile_1 = require("./components/Profile");
 const Dropdown_1 = require("./components/Dropdown");
 const Markdown_1 = require("./components/Markdown");
 const Tooltip_1 = require("./components/Tooltip");
+const LastUpdated_1 = require("./components/LastUpdated");
+const NavbarLogo_1 = require("./components/NavbarLogo");
 const themeColors = (0, styled_components_1.css) `
 /* === Palette === */
   /**
@@ -206,16 +208,17 @@ const themeColors = (0, styled_components_1.css) `
   --color-warning: var(--color-warning-base);
   --color-success: var(--color-success-base);
   --color-info: var(--color-info-base);
- 
+
   /**
    * @tokens Elevation Colors
    * @presenter Color
    */
 
-  --bg-sunken: #F1F1F1; // Sunken is the lowest elevation available.
   --bg-base: #ffffff; // The default elevation is the baseline with respect to all other layers.
+  --bg-sunken: #f1f1f1; // Sunken is the lowest elevation available.
   --bg-raised: #fafafa; // Cards, elements, inputs
   --bg-overlay: #f2f2f2; // Overlay is the highest elevation available. Use for hovers
+  --bg-modal-overlay: #f2f2f2c2; // Overlay is the highest elevation available. Use for hovers
 
   --bg-base-shadow: 0px 3px 5px rgba(51, 51, 51, 0.2), 0px 0px 1px rgba(51, 51, 51, 0.31); // Elements
   --bg-raised-shadow: 0px 8px 12px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31); // Hovers for base. Menu
@@ -248,7 +251,7 @@ const typography = (0, styled_components_1.css) `
   --text-description: #8d8d8d; // Caption, Description, Icon
   --text-placeholder: #a8a8a8; // Placeholder text, Disabled text
   --text-link: var(--color-blue-6);
-  
+
   /**
     * @tokens Font Weights
     * @presenter FontWeight
@@ -258,7 +261,7 @@ const typography = (0, styled_components_1.css) `
   --font-weight-bold: 600; // All strong weights in the entire system.
   --font-weight-bolder: 700;
   --font-weight-italic: 'Regular Italic'; // All italic weights in the entire system.
-  
+
   /**
    * @tokens Line Heights
    * @presenter LineHeight
@@ -277,15 +280,10 @@ const typography = (0, styled_components_1.css) `
     * @presenter FontSize
     */
 
-  --font-size-base: 14px; // Base font size of the entire system.
-  --font-size-sm: 12px;
-  --font-size-lg: 16px;
-  --font-size-xl: 20px;
-  --font-size-heading-1: 38px;
-  --font-size-heading-2: 30px;
-  --font-size-heading-3: 24px;
-  --font-size-heading-4: 20px;
-  --font-size-heading-5: 16px;
+  --font-size-base: 16px; // Base font size of the entire system.
+  --font-size-sm: 14px;
+  --font-size-lg: 18px;
+  --font-size-xl: 22px;
 
   /**
     * @tokens Font Rendering
@@ -298,7 +296,7 @@ const typography = (0, styled_components_1.css) `
 `;
 const sizeAndSpace = (0, styled_components_1.css) `
   /* === Size & Space === */
-  
+
   /**
     * @tokens Size
     * @presenter Spacing
@@ -312,7 +310,7 @@ const sizeAndSpace = (0, styled_components_1.css) `
     */
 
   --spacing-unit: 4px;
-  
+
   --spacing-base: calc(var(--spacing-unit) * 4);
   --spacing-xxs: var(--spacing-unit);
   --spacing-xs: calc(var(--spacing-unit) * 2);
@@ -324,7 +322,7 @@ const sizeAndSpace = (0, styled_components_1.css) `
 
   --spacing-horizontal: var(--spacing-xl);
   --spacing-vertical: var(--spacing-base);
-  
+
   /**
     * @tokens Height
     * @presenter Spacing
@@ -427,26 +425,37 @@ const headingsTypography = (0, styled_components_1.css) `
     * @tokens Heading level 4
     */
 
+  --h4-font-family: var(--heading-font-family); // @presenter FontFamily
   --h4-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h4-font-size: 16px; // @presenter FontSize
-  --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h4-line-height: 16px; // @presenter LineHeight
   --h4-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h4-text-color: var(--heading-text-color); // @presenter Color
 
   /**
     * @tokens Heading level 5
     */
 
+  --h5-font-family: var(--heading-font-family); // @presenter FontFamily
+  --h5-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h5-font-size: 14px; // @presenter FontSize
-  --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h5-line-height: 14px; // @presenter LineHeight
   --h5-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h5-text-color: var(--heading-text-color); // @presenter Color
 
   /**
     * @tokens Heading level 6
     */
 
+  --h6-font-family: var(--heading-font-family); // @presenter FontFamily
+  --h6-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h6-font-size: 12px; // @presenter FontSize
+  --h6-line-height: 12px; // @presenter LineHeight
   --h6-margin-top: var(--heading-margin-top); // @presenter Spacing
   --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h6-text-color: var(--heading-text-color); // @presenter Color
 
   // @tokens End
 `;
@@ -500,7 +509,7 @@ const apiReferenceDocs = (0, styled_components_1.css) `
   --schemas-mime-type-dropdown-padding: 0px 26px 0px 4px;
   --schemas-mime-type-dropdown-border: var(--docs-dropdown-border); // @presenter Border
   --schemas-mime-type-dropdown-font-size: var(--docs-dropdown-font-size); // @presenter FontSize
-  --schemas-mime-type-dropdown-text-color: var(--docs-dropdown-font-size); // @presenter Color
+  --schemas-mime-type-dropdown-text-color: var(--docs-dropdown-text-color); // @presenter Color
 
   /**
     * @tokens API Reference Schemas Discriminator Dropdown
@@ -579,9 +588,9 @@ const apiReferenceDocs = (0, styled_components_1.css) `
     * @presenter Color
     */
 
-  --schema-recursive-text-color: var(--color-warning);
-  --schema-recursive-background-color: var(--schema-inline-background-color);
-  --schema-recursive-border-color: var(--schema-inline-border-color);
+  --schema-recursive-text-color: var(--color-warning); // @presenter Color
+  --schema-recursive-background-color: var(--color-warning-bg); // @presenter Color
+  --schema-recursive-border-color: var(--color-warning-border); // @presenter Color
 
   /**
     * @tokens GraphQL Docs Reference Schema Non null label
@@ -591,7 +600,7 @@ const apiReferenceDocs = (0, styled_components_1.css) `
   --schema-non-null-text-color: var(--schema-inline-code-text-color);
   --schema-non-null-background-color: var(--schema-inline-background-color);
   --schema-non-null-border-color: var(--schema-inline-border-color);
-  
+
   /**
     * @tokens API Reference Schema Nested styles
     */
@@ -693,19 +702,6 @@ const badges = (0, styled_components_1.css) `
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 
 
-  // @tokens End
-`;
-const logo = (0, styled_components_1.css) `
-  /**
-    * @tokens Logo
-    */
-
-  --navbar-logo-height: 2rem; // @presenter Spacing
-  --navbar-logo-width: auto;
-  --navbar-logo-margin: 16px; // @presenter Spacing
-  --navbar-logo-max-width: 285px; // @presenter Spacing
-  --navbar-logo-max-height: 285px; // @presenter Spacing
-
   // @tokens End
 `;
 const loadProgressBar = (0, styled_components_1.css) `
@@ -788,18 +784,12 @@ const docsDropdown = (0, styled_components_1.css) `
   --docs-dropdown-font-size: var(--font-size-base);
   --docs-dropdown-text-color: var(--text-secondary);
 
-  --docs-dropdown-padding-vertical: 0;
+  --docs-dropdown-padding-vertical: 6px;
   --docs-dropdown-padding-left: 10px;
   --docs-dropdown-padding-right: 26px;
   --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right) var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
   --docs-dropdown-border: 1px solid var(--border-primary);
 `;
-const lastUpdated = (0, styled_components_1.css) `
-  --last-updated-text-color: var(--text-secondary);
-  --last-updated-font-size: var(--font-size-sm);
-  --last-updated-font-family: var(--font-family-base);
-  --last-updated-line-height: var(--line-height-base);
-`;
 const tile = (0, styled_components_1.css) `
   --wide-tile-background-color: var(--bg-raised);
   --thin-tile-background-color: var(--bg-raised);
@@ -861,18 +851,18 @@ const error = (0, styled_components_1.css) `
   --error-bubble-gap: var(--spacing-base);
   --error-bubble-font-family: var(--font-family-base);
   --error-bubble-z-index: var(--z-index-popover);
-  
+
   --error-card-border-radius: calc(var(--spacing-xxs) * 1.5);
   --error-card-background: var(--bg-raised);
   --error-card-padding: var(--spacing-xs) var(--spacing-base);
   --error-card-text-color: var(--text-primary);
   --error-card-font-size: var(--font-size-base);
   --error-card-font-style: normal;
-  --error-card-font-weight: var(--font-weight-normal);
+  --error-card-font-weight: var(--font-weight-regular);
   --error-card-line-height: var(--line-height-base);
   --error-card-box-shadow: var(--bg-raised-shadow);
   --error-card-icon-margin: 0 var(--spacing-xs) 0 0;
-  
+
   --detailed-error-overlay-background: #4f4f4f;
   --detailed-error-overlay-opacity: 0.9;
   --detailed-error-overlay-z-index: var(--z-index-raised);
@@ -889,13 +879,13 @@ const error = (0, styled_components_1.css) `
   --detailed-error-modal-font-family: var(--font-family-base);
   --detailed-error-modal-padding: var(--spacing-md);
   --detailed-error-modal-wapper-text-align: right;
-  
+
   --detailed-error-content-margin-top: var(--spacing-md);
   --detailed-error-content-height: 100%;
-  
+
   --detailed-error-close-button-color: var(--text-description);
   --detailed-error-close-button-text-transform: uppercase;
-  
+
   --detailed-error-message-margin: var(--spacing-base) auto var(--spacing-lg);
   --detailed-error-message-padding: var(--spacing-base);
   --detailed-error-message-border-radius: var(--border-radius);
@@ -910,8 +900,8 @@ const modal = (0, styled_components_1.css) `
     overflow: hidden;
   }
 
-  --modal-box-shadow: 0px 8px 12px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31);
-  --modal-overlay-background-color: rgba(206, 206, 206, 0.49);
+  --modal-box-shadow: var(--bg-overlay-shadow);
+  --modal-overlay-background-color: var(--bg-modal-overlay);
   --modal-background-color: var(--bg-base);
 `;
 const zIndexDepth = (0, styled_components_1.css) `
@@ -939,10 +929,10 @@ exports.styles = (0, styled_components_1.css) `
     ${headingsTypography}
     ${inputs}
     ${I18n_1.languagePicker}
-    ${lastUpdated}
+    ${LastUpdated_1.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${logo}
+    ${NavbarLogo_1.logo}
     ${Markdown_1.markdown}
     ${Menu_1.menu}
     ${Menu_1.mobileMenu}
@@ -967,7 +957,6 @@ exports.styles = (0, styled_components_1.css) `
     ${Sidebar_1.versionPicker}
     ${zIndexDepth}
 
-    --api-onboarding-table-text-color: #4e5356;
     --api-catalog-card-min-width: 250px;
 
     background-color: var(--bg-base);
@@ -977,8 +966,6 @@ exports.styles = (0, styled_components_1.css) `
 
   :root.dark {
     ${darkColors_1.darkMode};
-
-    --api-onboarding-table-text-color: #ffffff;
   }
 
   :root.notransition * {

package/lib/icons/PlusIcon/PlusIcon.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlusIcon = exports.Icon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Icon = () => (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "black", xmlns: "http://www.w3.org/2000/svg" },
+const Icon = () => (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" },
     react_1.default.createElement("path", { d: "M7.53125 2.375H8.46875C8.55208 2.375 8.59375 2.41667 8.59375 2.5V13.5C8.59375 13.5833 8.55208 13.625 8.46875 13.625H7.53125C7.44792 13.625 7.40625 13.5833 7.40625 13.5V2.5C7.40625 2.41667 7.44792 2.375 7.53125 2.375Z", fill: "inherit" }),
     react_1.default.createElement("path", { d: "M2.75 7.40625H13.25C13.3333 7.40625 13.375 7.44792 13.375 7.53125V8.46875C13.375 8.55208 13.3333 8.59375 13.25 8.59375H2.75C2.66667 8.59375 2.625 8.55208 2.625 8.46875V7.53125C2.625 7.44792 2.66667 7.40625 2.75 7.40625Z", fill: "inherit" })));
 exports.Icon = Icon;

package/lib/ui/ArrowBack.js

@@ -12,7 +12,6 @@ const Arrow = ({ className, dataComponentName, }) => (react_1.default.createElem
         react_1.default.createElement("path", { d: "M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" }))));
 exports.ArrowBack = (0, styled_components_1.default)(Arrow) `
   fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit));
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;

package/lib/ui/darkColors.js

@@ -192,10 +192,10 @@ exports.darkMode = (0, styled_components_1.css) `
     */
   --text-base: #ffffff; // The base color of the typography color tokens.
   --text-light-solid: #ffffff; // The color of the objects that need to be white no matter what theme is enabled.
-  --text-primary: #e3e3e3; // Headers, Icon hover
-  --text-secondary: #b3b3b3; // Body text
-  --text-description: #8e8e8e; // Caption, Description, Icon
-  --text-placeholder: #7b7b7b; // Placeholder text, Disabled text
+  --text-primary: #ffffffde; // Headers, Icon hover
+  --text-secondary: #ffffff99; // Body text
+  --text-description: #ffffff61; // Caption, Description, Icon
+  --text-placeholder: #ffffff61; // Placeholder text, Disabled text
   --text-link: var(--color-blue-6);
 
   /**
@@ -207,6 +207,7 @@ exports.darkMode = (0, styled_components_1.css) `
   --bg-base: #141414; // The default elevation is the baseline with respect to all other layers.
   --bg-raised: #1f1f1f; // Cards, elements, inputs
   --bg-overlay: #282828; // Overlay is the highest elevation available. Use for hovers
+  --bg-modal-overlay: #282828c2;
 
   --bg-base-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.5); // Elements
   --bg-raised-shadow: 0px 8px 12px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.5); // Hovers for base. Menu

package/lib/utils/index.d.ts

@@ -9,3 +9,4 @@ export * from './args-typecheck';
 export * from './color';
 export * from './urls';
 export * from './jsUtils';
+export * from './tags-parser';

package/lib/utils/index.js

@@ -25,4 +25,5 @@ __exportStar(require("./args-typecheck"), exports);
 __exportStar(require("./color"), exports);
 __exportStar(require("./urls"), exports);
 __exportStar(require("./jsUtils"), exports);
+__exportStar(require("./tags-parser"), exports);
 //# sourceMappingURL=index.js.map

package/lib/utils/tags-parser.d.ts

@@ -0,0 +1 @@
+export declare const slug: (value: string) => string;

package/lib/utils/tags-parser.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.slug = void 0;
+const slug = (value) => {
+    const matches = value.match(/[a-zA-Z0-9_-]*/g);
+    const result = matches === null || matches === void 0 ? void 0 : matches.filter((value) => value !== '').join('-').toLowerCase();
+    return result !== null && result !== void 0 ? result : value;
+};
+exports.slug = slug;
+//# sourceMappingURL=tags-parser.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.18.3-patch.0",
+  "version": "0.18.3-patch.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
     "webpack": "^5.72.0",
-    "@redocly/portal-types": "1.0.1"
+    "@redocly/portal-types": "1.0.2"
   },
   "dependencies": {
     "@redocly/ajv": "^8.11.0",

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -3,14 +3,20 @@ import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
 
-export const Breadcrumb = (props: { label: string; link?: string; isActive: boolean }) => {
-  const { label, link, isActive } = props;
+export const Breadcrumb = (props: {
+  label: string;
+  link?: string;
+  isActive: boolean;
+  onClick?: () => void;
+}) => {
+  const { label, link, isActive, onClick } = props;
 
   return (
     <BreadcrumbWrapper
       data-component-name="Breadcrumbs/Breadcrumb"
       isLink={link != null}
       isActive={isActive}
+      onClick={onClick}
     >
       {link ? (
         <BreadcrumbLink to={link}>{label}</BreadcrumbLink>

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { useBreadcrumbs } from '@portal/Sidebar/useBreadcrumbs';
+import { telemetry } from '@portal/telemetry';
 
 import { Breadcrumb } from './Breadcrumb';
 
@@ -18,7 +19,18 @@ export const Breadcrumbs = (props: { className?: string }) => {
         const isLast = idx === breadcrumbs.length - 1;
         return (
           <React.Fragment key={idx}>
-            <Breadcrumb link={breadcrumb.link} label={breadcrumb.label} isActive={isLast} />
+            <Breadcrumb
+              link={breadcrumb.link}
+              label={breadcrumb.label}
+              isActive={isLast}
+              onClick={() => {
+                telemetry.send('breadcrumb_clicked', {
+                  link: breadcrumb.link,
+                  position: idx + 1,
+                  total_breadcrumbs: breadcrumbs.length,
+                });
+              }}
+            />
             {isLast ? null : <div>/</div>}
           </React.Fragment>
         );

package/src/components/Button/Button.tsx

@@ -102,12 +102,14 @@ const StyledButton = styled.button.attrs(
         `
       : variant === 'text'
       ? css`
-          border-color: transparent;
-          background-color: transparent;
+          color: var(--button-color);
+          border-color: var(--button-border-color);
+          background-color: var(--button-background-color);
 
           &:hover {
-            border-color: transparent;
-            background-color: transparent;
+            color: var(--button-hover-color);
+            border-color: var(--button-hover-border-color);
+            background-color: var(--button-hover-background-color);
             box-shadow: none;
           }
         `