@redocly/theme 0.18.6 → 0.19.1

package/lib/components/CodeBlock/CodeBlockControlButton.d.ts

@@ -1,5 +1,4 @@
-export declare const CodeBlockControlButton: import("styled-components").StyledComponent<"button", any, {
-    'data-component-name': string;
-} & {
+/// <reference types="react" />
+export declare const CodeBlockControlButton: import("styled-components").StyledComponent<import("react").FC<import("../../components/Button").ButtonProps>, any, {
     asIcon?: boolean | undefined;
-}, "data-component-name">;
+}, never>;

package/lib/components/CodeBlock/CodeBlockControlButton.js

@@ -25,26 +25,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlockControlButton = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
-exports.CodeBlockControlButton = styled_components_1.default.button.attrs(() => ({
-    'data-component-name': 'CodeBlockControls/CodeBlockControlButton',
-})) `
-  border: 0;
-  outline: 0;
-  border-radius: var(--border-radius);
-  height: 20px;
-  font-size: 12px;
-  line-height: 12px;
-  cursor: pointer;
-  padding: 1px 6px;
-  color: var(--panel-samples-controls-text-color);
+const Button_1 = require("../../components/Button");
+exports.CodeBlockControlButton = (0, styled_components_1.default)(Button_1.Button) `
+  color: var(--code-block-controls-text-color);
 
   ${({ asIcon }) => asIcon
     ? (0, styled_components_1.css) `
-          background-color: var(--panel-samples-icon-controls-background-color);
+          background-color: var(--code-block-icon-controls-background-color);
         `
     : (0, styled_components_1.css) `
           min-width: 90px;
-          background-color: var(--panel-samples-text-controls-background-color);
+          background-color: var(--code-block-text-controls-background-color);
         `}
 
   ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
@@ -54,10 +45,5 @@ exports.CodeBlockControlButton = styled_components_1.default.button.attrs(() =>
   :not(:first-child) {
     margin-left: 5px;
   }
-
-  :hover,
-  :focus {
-    background-color: var(--panel-samples-controls-hover-background-color);
-  }
 `;
 //# sourceMappingURL=CodeBlockControlButton.js.map

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -7,10 +7,10 @@ exports.CodeBlockControls = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock");
+const CopyButton_1 = require("../../components/CopyButton/CopyButton");
 const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
 const telemetry_1 = require("../../mocks/telemetry");
-const CopyButton_1 = require("../CopyButton");
 function CodeBlockControls({ children, className, title, controls, }) {
     var _a, _b, _c, _d, _e;
     const { codeSnippet } = (0, hooks_1.useThemeConfig)();
@@ -36,19 +36,22 @@ exports.CodeBlockControls = CodeBlockControls;
 const ContainerWraper = styled_components_1.default.div `
   display: flex;
   justify-content: space-between;
-  padding: 5px 10px;
   min-height: 30px;
-  background-color: var(--panel-samples-controls-background-color);
-  border-bottom: var(--panel-samples-controls-border);
-  border-radius: var(--border-radius) var(--border-radius) 0 0;
+  padding: var(--code-block-controls-padding);
+  background-color: var(--code-block-controls-background-color);
+  border-top: var(--code-block-controls-border);
+  border-left: var(--code-block-controls-border);
+  border-right: var(--code-block-controls-border);
+  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
   margin-top: 10px;
 `;
 const Title = styled_components_1.default.span `
   display: flex;
   align-items: center;
-  color: var(--panel-samples-controls-text-color);
+  color: var(--code-block-controls-text-color);
 `;
 const ControlsWrapper = styled_components_1.default.div `
+  display: flex;
   opacity: 0.7;
   transition: opacity 0.3s ease;
   text-align: right;

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

@@ -2,3 +2,4 @@ export * from '../../components/CodeBlock/CodeBlock';
 export * from '../../components/CodeBlock/CodeBlockContainer';
 export * from '../../components/CodeBlock/CodeBlockControls';
 export * from '../../components/CodeBlock/CodeBlockControlButton';
+export * from '../../components/CodeBlock/styledVariables';

package/lib/components/CodeBlock/index.js

@@ -18,4 +18,5 @@ __exportStar(require("../../components/CodeBlock/CodeBlock"), exports);
 __exportStar(require("../../components/CodeBlock/CodeBlockContainer"), exports);
 __exportStar(require("../../components/CodeBlock/CodeBlockControls"), exports);
 __exportStar(require("../../components/CodeBlock/CodeBlockControlButton"), exports);
+__exportStar(require("../../components/CodeBlock/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

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

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

package/lib/components/CodeBlock/styledVariables.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.code = void 0;
+const styled_components_1 = require("styled-components");
+exports.code = (0, styled_components_1.css) `
+  /**
+    * @tokens Code base styles
+    */
+  --code-font-size: 13px; // @presenter FontSize
+  --code-font-family: var(--font-family-monospaced); // @presenter FontFamily
+  --code-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --code-line-height: var(--line-height-xsm); // @presenter LineHeight
+  --code-wrap: pre;
+  --code-word-break: break-word;
+
+  /**
+    * @tokens Inline Code
+    */
+  --inline-code-font-size: var(--code-font-size); // @presenter FontSize
+  --inline-code-font-family: var(--code-font-family); // @presenter FontFamily
+  --inline-code-font-weight: var(--code-font-weight); // @presenter FontWeight
+  --inline-code-line-height: var(--code-line-height); // @presenter LineHeight
+  --inline-code-text-color: var(--text-secondary); // @presenter Color
+  --inline-code-background-color: var(--bg-overlay); // @presenter Color
+  --inline-code-border-color: var(--border-primary); // @presenter Color
+  --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  /**
+    * @tokens Code Block
+    */
+  --code-block-font-size: var(--code-font-size); // @presenter FontSize
+  --code-block-font-family: var(--code-font-family); // @presenter FontFamily
+  --code-block-line-height: var(--code-line-height); // @presenter LineHeight
+  --code-block-font-weight: var(--code-font-weight); // @presenter FontWeight
+  --code-block-text-color: var(--text-secondary); // @presenter Color
+  --code-block-background-color: var(--bg-raised); // @presenter Color
+  --code-block-border-color: var(--border-primary); // @presenter Color
+  --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --code-block-padding: calc(var(--spacing-unit) * 2);
+  --code-block-margin: 0;
+  --code-block-max-height: 50vh;
+  --code-block-word-break: initial;
+
+  /**
+    * @tokens Code Block controls
+    */
+
+  --code-block-controls-font-size: var(--font-size-base); // @presenter FontSize
+  --code-block-controls-font-family: var(--font-family-base); // @presenter FontFamily
+  --code-block-controls-text-color: var(--text-secondary); // @presenter Color
+  --code-block-controls-background-color: var(--bg-overlay); // @presenter Color
+  --code-block-controls-border: 1px solid var(--border-primary); // @presenter Border
+  --code-block-controls-padding: 0 var(--spacing-xs); // @presenter Spacing
+  --code-block-icon-controls-background-color: var(--code-block-controls-background-color);
+  --code-block-text-controls-background-color: var(--code-block-controls-background-color);
+
+  /**
+    * @tokens Code Block tokens
+   */
+  --code-block-tokens-default-color: var(--text-secondary); // @presenter Color
+  --code-block-tokens-comment-color: var(--text-placeholder); // @presenter Color
+  --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color
+  --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
+  --code-block-tokens-boolean-color: var(--color-geekblue-7); // @presenter Color
+  --code-block-tokens-string-color: var(--color-cyan-7); // @presenter Color
+  --code-block-tokens-property-string-color: var(--text-secondary); // @presenter Color
+  --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color
+  --code-block-tokens-link-color: var(--color-blue-7); // @presenter Color
+  --code-block-tokens-operator-color: var(--color-gold-7); // @presenter Color
+  --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color
+  --code-block-tokens-keyword-color: var(--color-magenta-7); // @presenter Color
+  --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
+  --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
+  --code-block-tokens-regex-color: var(--color-yellow-7); // @presenter Color
+  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
+  --code-block-tokens-deleted-color: var(--color-red-7); // @presenter Color
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.js

@@ -60,7 +60,6 @@ function ColorModeSwitcher(props) {
 }
 exports.ColorModeSwitcher = ColorModeSwitcher;
 const Wrapper = styled_components_1.default.div `
-  margin-left: var(--navbar-item-padding-horizontal);
   display: flex;
   align-items: center;
   cursor: pointer;

package/lib/components/Dropdown/Dropdown.d.ts

@@ -1,16 +1,22 @@
 import React from 'react';
 export interface DropdownProps {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     items: JSX.Element[] | string[];
     dataAttributes?: Record<string, string>;
     className?: string;
     withArrow?: boolean;
     triggerEvent?: 'click' | 'hover';
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
     onChange?: (value: React.ReactNode | string) => void;
+    icon?: React.ReactNode;
 }
-export declare const Dropdown: ({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, }: DropdownProps) => JSX.Element;
+export declare const Dropdown: ({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, placement, alignment, icon, }: DropdownProps) => JSX.Element;
 export declare const DropdownHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DropdownList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const DropdownList: import("styled-components").StyledComponent<"ul", any, {
+    placement?: string | undefined;
+    alignment?: string | undefined;
+}, never>;
 export declare const DropdownListItem: import("styled-components").StyledComponent<"li", any, {
     separator?: boolean | undefined;
 }, never>;

package/lib/components/Dropdown/Dropdown.js

@@ -28,7 +28,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
-const Dropdown = ({ children, className, items, withArrow, triggerEvent = 'click', onChange, dataAttributes, }) => {
+const Dropdown = ({ children, className, items, withArrow, triggerEvent = 'click', onChange, dataAttributes, placement, alignment, icon, }) => {
     const dropdownRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const handleOpen = () => {
@@ -48,8 +48,9 @@ const Dropdown = ({ children, className, items, withArrow, triggerEvent = 'click
     return (react_1.default.createElement(DropdownContainer, Object.assign({}, dataAttributes, { "data-testid": "dropdown", className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: handleClose, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
         react_1.default.createElement(exports.DropdownHeader, null,
             children,
+            icon,
             withArrow ? isOpen ? react_1.default.createElement(icons_1.ArrowIcon, { direction: "up" }) : react_1.default.createElement(icons_1.ArrowIcon, { direction: "down" }) : null),
-        isOpen && (react_1.default.createElement(exports.DropdownList, null, items.map((item, index) => {
+        isOpen && (react_1.default.createElement(exports.DropdownList, { placement: placement, alignment: alignment }, items.map((item, index) => {
             var _a;
             return (react_1.default.createElement(exports.DropdownListItem, { key: index, onClick: () => handleClick(item), separator: (_a = item.props) === null || _a === void 0 ? void 0 : _a.separator }, item));
         })))));
@@ -77,8 +78,10 @@ exports.DropdownHeader = styled_components_1.default.div `
 `;
 exports.DropdownList = styled_components_1.default.ul `
   position: absolute;
-  top: 100%;
-  left: 0;
+  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
+  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
+  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--dropdown-list-min-width);
   max-width: var(--dropdown-list-max-width);

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

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

package/lib/components/Dropdown/index.js

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

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

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

package/lib/components/Dropdown/styledVariables.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dropdown = void 0;
+const styled_components_1 = require("styled-components");
+exports.dropdown = (0, styled_components_1.css) `
+  /**
+    * @tokens Dropdown
+    * */
+  --dropdown-font-size: var(--font-size-base); // @presenter FontSize
+  --dropdown-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --dropdown-line-height: var(--line-height-base); // @presenter LineHeight
+  --dropdown-text-color: var(--text-secondary); // @presenter Color
+  --dropdown-border-radius: var(--border-radius); // @presenter BorderRadius
+
+  --dropdown-list-min-width: 100px;
+  --dropdown-list-max-width: 300px;
+  --dropdown-list-padding: var(--spacing-xxs); // @presenter Spacing
+  --dropdown-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --dropdown-list-background-color: var(--background-color); // @presenter Color
+  --dropdown-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
+
+  --dropdown-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
+  --dropdown-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
+  --dropdown-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --dropdown-list-item-active-background-color: var(--bg-raised); // @presenter Color
+  --dropdown-list-item-separator-color: var(--border-primary); // @presenter Color
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/EditPageButton/EditPageButton.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 export interface EditPageButtonProps {
-    text: string;
     to: string;
-    icon?: string;
 }
-export declare const EditPageButton: ({ text, to, icon }: EditPageButtonProps) => JSX.Element;
+export declare const EditPageButton: ({ to }: EditPageButtonProps) => JSX.Element;

package/lib/components/EditPageButton/EditPageButton.js

@@ -8,28 +8,37 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const telemetry_1 = require("../../mocks/telemetry");
-const EditPageButton = ({ text, to, icon }) => {
-    return (react_1.default.createElement(EditButton, { to: to, onClick: () => telemetry_1.telemetry.send('edit_page_link_clicked', {}) },
-        icon ? react_1.default.createElement(ButtonIcon, { src: icon }) : null,
-        react_1.default.createElement(ButtonText, null, text)));
+const icons_1 = require("../../icons");
+const hooks_1 = require("../../mocks/hooks");
+const EditPageButton = ({ to }) => {
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        text: 'theme.markdown.editPage.text',
+    };
+    return (react_1.default.createElement(EditButton, { "data-component-name": "EditPageButton/EditPageButton", to: to, onClick: () => telemetry_1.telemetry.send('edit_page_link_clicked', {}) },
+        react_1.default.createElement(ButtonIcon, null),
+        react_1.default.createElement(ButtonText, { "data-translation-key": translationKeys.text }, translate(translationKeys.text, 'Edit'))));
 };
 exports.EditPageButton = EditPageButton;
 const EditButton = (0, styled_components_1.default)(Link_1.Link) `
   margin-left: auto;
   display: inline-flex;
-  color: var(--color-content);
+  color: var(--text-secondary);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   text-decoration: none;
 
+  &:hover {
+    color: var(--text-primary);
+  }
+
   @media print {
     display: none;
   }
 `;
-const ButtonIcon = styled_components_1.default.img `
-  height: 14px;
-  padding-right: 3px;
+const ButtonIcon = (0, styled_components_1.default)(icons_1.EditIcon) `
+  margin-right: 3px;
 `;
 const ButtonText = styled_components_1.default.span `
   line-height: 14px;

package/lib/components/Feedback/Comment.js

@@ -70,6 +70,11 @@ const Wrapper = styled_components_1.default.div `
   width: 100%;
 `;
 const Label = styled_components_1.default.h3 `
+  font-family: var(--h3-font-family);
+  font-weight: var(--h3-font-weight);
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-line-height);
+  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 const TextArea = styled_components_1.default.textarea `

package/lib/components/Feedback/Rating.js

@@ -83,6 +83,10 @@ const Star = styled_components_1.default.span `
 `;
 const Label = styled_components_1.default.h3 `
   margin-right: 15px;
-  font-family: var(--font-family-base);
+  font-family: var(--h3-font-family);
+  font-weight: var(--h3-font-weight);
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-line-height);
+  color: var(--h3-text-color);
 `;
 //# sourceMappingURL=Rating.js.map

package/lib/components/Feedback/Reasons.js

@@ -67,6 +67,11 @@ const Wrapper = styled_components_1.default.div `
   flex-direction: column;
 `;
 const Label = styled_components_1.default.h3 `
+  font-family: var(--h3-font-family);
+  font-weight: var(--h3-font-weight);
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-line-height);
+  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 const SendButton = (0, styled_components_1.default)(Button_1.Button).attrs(() => ({
@@ -85,7 +90,7 @@ const OptionWrapper = styled_components_1.default.div `
     cursor: pointer;
   }
   label {
-    font-size: 14px;
+    font-size: var(--font-size-base);
     cursor: pointer;
   }
 `;

package/lib/components/Feedback/Sentiment.js

@@ -82,6 +82,11 @@ const Wrapper = styled_components_1.default.div `
   align-items: center;
 `;
 const Label = styled_components_1.default.h3 `
+  font-family: var(--h3-font-family);
+  font-weight: var(--h3-font-weight);
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-line-height);
+  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 const Vote = styled_components_1.default.div `

package/lib/components/Feedback/Thumbs.js

@@ -69,12 +69,12 @@ exports.ThumbDown = ThumbDown;
 const Wrapper = styled_components_1.default.div `
   font-family: var(--font-family-base);
   display: flex;
-  color: var(--color-primary-500);
+  color: var(--color-info-text);
   &:hover {
-    color: var(--color-primary-600);
+    color: var(--color-info-text-active);
     svg {
       > g {
-        fill: var(--color-primary-600);
+        fill: var(--color-info-text-active);
       }
     }
   }
@@ -85,7 +85,7 @@ const Icon = styled_components_1.default.div `
   margin-right: 5px;
   > svg {
     > g {
-      fill: var(--color-primary-500);
+      fill: var(--color-info-text);
     }
   }
 `;

package/lib/components/Filter/Filter.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
-export declare function Filter({ filter }: {
+import type { ThemeConfig } from '../../config';
+export declare function Filter({ filter, filterValuesCasing, }: {
     filter: ResolvedFilter & {
         selectedOptions: any;
     };
+    filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }): JSX.Element | null;