@redocly/theme 0.9.14 → 0.10.0

package/lib/Markdown/Tabs/Tabs.d.ts

@@ -1,10 +1,11 @@
 import type { PropsWithChildren } from 'react';
+type Child = {
+    props: {
+        label: string;
+    } & TabsProps;
+};
 type TabsProps = PropsWithChildren<{
-    children: {
-        props: {
-            label: string;
-        } & TabsProps;
-    }[];
+    children: Child[];
 }>;
-export declare function Tabs({ children }: TabsProps): JSX.Element;
+export declare function Tabs(props: TabsProps): JSX.Element;
 export {};

package/lib/Markdown/Tabs/Tabs.js

@@ -30,8 +30,10 @@ exports.Tabs = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tab_1 = require("../../Markdown/Tabs/Tab");
-function Tabs({ children }) {
-    const [activeTab, setActiveTab] = (0, react_1.useState)(children[0].props.label);
+function Tabs(props) {
+    var _a;
+    const children = react_1.default.Children.toArray(props.children);
+    const [activeTab, setActiveTab] = (0, react_1.useState)((_a = children[0]) === null || _a === void 0 ? void 0 : _a.props.label);
     const onTabSelect = (label) => setActiveTab(label);
     return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdown/Tabs/Tabs" },
         react_1.default.createElement(TabList, null, children.map((child) => {

package/lib/Sidebar/SeparatorItem.js

@@ -17,6 +17,10 @@ exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuIte
   text-transform: var(--sidebar-item-separator-text-transform);
   background: var(--sidebar-item-separator-background-color);
 
+  *:not(:first-child) > & {
+    margin-top: var(--sidebar-item-separator-offset);
+  }
+
   :hover {
     color: inherit;
     background-color: inherit;

package/lib/Sidebar/SeparatorLine.js

@@ -10,6 +10,6 @@ exports.SeparatorLine = styled_components_1.default.div.attrs(() => ({
 })) `
   height: 1px;
   background-color: var(--sidebar-item-separator-line-color);
-  margin: var(--sidebar-item-padding-vertical) 0;
+  margin: var(--sidebar-item-separator-offset) 0 var(--sidebar-item-padding-vertical) 0;
 `;
 //# sourceMappingURL=SeparatorLine.js.map

package/lib/config.d.ts

@@ -451,6 +451,10 @@ export declare const themeConfigSchema: {
         readonly feedback: {
             readonly type: "object";
             readonly properties: {
+                readonly hide: {
+                    readonly type: "boolean";
+                    readonly default: false;
+                };
                 readonly type: {
                     readonly type: "string";
                     readonly enum: readonly ["rating", "sentiment", "comment", "reasons"];

package/lib/config.js

@@ -144,6 +144,10 @@ exports.themeConfigSchema = {
         feedback: {
             type: 'object',
             properties: {
+                hide: {
+                    type: 'boolean',
+                    default: false,
+                },
                 type: {
                     type: 'string',
                     enum: ['rating', 'sentiment', 'comment', 'reasons'],

package/lib/globalStyle.js

@@ -505,6 +505,7 @@ const sidebar = (0, styled_components_1.css) `
   --sidebar-item-separator-text-color: var(--sidebar-item-text-color);
   --sidebar-item-separator-background-color: var(--sidebar-background-color);
   --sidebar-item-separator-line-color: var(--border-color); // but has line color
+  --sidebar-item-separator-offset: calc(var(--sidebar-spacing-unit) * 2);
 
   /**
     * @tokens Sidebar back button
@@ -561,7 +562,7 @@ const admonition = (0, styled_components_1.css) `
   * @tokens Admonition type info
   */
 
-  --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color
+  --admonition-info-background-color: var(--color-secondary-200); // @presenter Color
   --admonition-info-heading-text-color: var(--text-color); // @presenter Color
   --admonition-info-text-color: var(--text-color); // @presenter Color
   --admonition-info-icon-color: var(--color-accent-900); // @presenter Color
@@ -1941,7 +1942,7 @@ const pages = (0, styled_components_1.css) `
 const userProfile = (0, styled_components_1.css) `
 
   /**
-  * @tokens User Profile 
+  * @tokens User Profile
   */
 
    --profile-name-font-family: var(--navbar-item-font-family); // @presenter FontFamily
@@ -1949,12 +1950,12 @@ const userProfile = (0, styled_components_1.css) `
    --profile-name-font-weight: var(--font-weight-regular); // @presenter FontWeight
    --profile-name-line-height: var(--line-height-base); // @presenter LineHeight
    --profile-name-text-color: var(--navbar-text-color); // @presenter Color
-   
+
    --profile-name-padding-horizontal: 0; // @presenter Spacing
    --profile-name-padding-vertical: 0; // @presenter Spacing
    --profile-name-margin-horizontal: 0; // @presenter Spacing
 
-   --profile-avatar-width: 40px; 
+   --profile-avatar-width: 40px;
    --profile-avatar-height: 40px;
    --profile-avatar-border-radius: 50%; // @presenter BorderRadius
 
@@ -1982,7 +1983,7 @@ const userProfile = (0, styled_components_1.css) `
    --profile-menu-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
    --profile-menu-item-line-height: var(--line-height-base);  // @presenter LineHeight
    --profile-menu-item-text-align: left;
- 
+
    --profile-menu-item-padding-horizontal: 15px; // @presenter Spacing
    --profile-menu-item-padding-vertical: 20px; // @presenter Spacing
 
@@ -1996,7 +1997,7 @@ const userProfile = (0, styled_components_1.css) `
    --profile-menu-item-separator-line-color: var(--border-color); // @presenter Color
 
    // @tokens End
- 
+
 `;
 const modal = (0, styled_components_1.css) `
   body:has(.modal) {

package/lib/ui/Dropdown.js

@@ -40,10 +40,9 @@ const DropDownHeader = styled_components_1.default.div `
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: #fff;
   padding: 8px 10px;
   border-radius: 4px;
-  border: 1px solid #e4e7eb;
+  border: 1px solid var(--border-color);
   font-weight: 600;
   color: var(--text-color);
   background: var(--color-secondary-200);
@@ -68,16 +67,16 @@ const IconWrapper = styled_components_1.default.span `
   }
 `;
 const ListItem = styled_components_1.default.div `
-  background-color: #fff;
+  background-color: var(--color-secondary-200);
   padding: 0.4em 10px;
   font-size: 1em;
   color: var(--text-color);
   cursor: pointer;
   &:hover {
-    background-color: rgba(38, 50, 56, 0.12);
+    background-color: var(--color-secondary-300);
   }
   &.active {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: var(--color-secondary-300);
   }
 `;
 const DropDownLink = (0, styled_components_1.default)(Link_1.Link) `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.9.14",
+  "version": "0.10.0",
   "description": "Shared UI components lib",
   "keywords": [],
   "author": "team@redocly.com",

package/src/Markdown/Tabs/Tabs.tsx

@@ -5,10 +5,12 @@ import type { PropsWithChildren } from 'react';
 
 import { Tab } from '@theme/Markdown/Tabs/Tab';
 
-type TabsProps = PropsWithChildren<{ children: { props: { label: string } & TabsProps }[] }>;
+type Child = { props: { label: string } & TabsProps };
+type TabsProps = PropsWithChildren<{ children: Child[] }>;
 
-export function Tabs({ children }: TabsProps): JSX.Element {
-  const [activeTab, setActiveTab] = useState(children[0].props.label);
+export function Tabs(props: TabsProps): JSX.Element {
+  const children = React.Children.toArray(props.children) as Child[];
+  const [activeTab, setActiveTab] = useState(children[0]?.props.label);
   const onTabSelect = (label: string) => setActiveTab(label);
 
   return (

package/src/Sidebar/SeparatorItem.tsx

@@ -13,6 +13,10 @@ export const SeparatorItem = styled(MenuItemLabel).attrs(() => ({
   text-transform: var(--sidebar-item-separator-text-transform);
   background: var(--sidebar-item-separator-background-color);
 
+  *:not(:first-child) > & {
+    margin-top: var(--sidebar-item-separator-offset);
+  }
+
   :hover {
     color: inherit;
     background-color: inherit;

package/src/Sidebar/SeparatorLine.tsx

@@ -5,5 +5,5 @@ export const SeparatorLine = styled.div.attrs(() => ({
 }))`
   height: 1px;
   background-color: var(--sidebar-item-separator-line-color);
-  margin: var(--sidebar-item-padding-vertical) 0;
+  margin: var(--sidebar-item-separator-offset) 0 var(--sidebar-item-padding-vertical) 0;
 `;

package/src/config.ts

@@ -177,6 +177,10 @@ export const themeConfigSchema = {
     feedback: {
       type: 'object',
       properties: {
+        hide: {
+          type: 'boolean',
+          default: false,
+        },
         type: {
           type: 'string',
           enum: ['rating', 'sentiment', 'comment', 'reasons'],

package/src/globalStyle.ts

@@ -510,6 +510,7 @@ const sidebar = css`
   --sidebar-item-separator-text-color: var(--sidebar-item-text-color);
   --sidebar-item-separator-background-color: var(--sidebar-background-color);
   --sidebar-item-separator-line-color: var(--border-color); // but has line color
+  --sidebar-item-separator-offset: calc(var(--sidebar-spacing-unit) * 2);
 
   /**
     * @tokens Sidebar back button
@@ -567,7 +568,7 @@ const admonition = css`
   * @tokens Admonition type info
   */
 
-  --admonition-info-background-color: var(--color-emphasis-200); // @presenter Color
+  --admonition-info-background-color: var(--color-secondary-200); // @presenter Color
   --admonition-info-heading-text-color: var(--text-color); // @presenter Color
   --admonition-info-text-color: var(--text-color); // @presenter Color
   --admonition-info-icon-color: var(--color-accent-900); // @presenter Color
@@ -1967,7 +1968,7 @@ const pages = css`
 const userProfile = css`
 
   /**
-  * @tokens User Profile 
+  * @tokens User Profile
   */
 
    --profile-name-font-family: var(--navbar-item-font-family); // @presenter FontFamily
@@ -1975,12 +1976,12 @@ const userProfile = css`
    --profile-name-font-weight: var(--font-weight-regular); // @presenter FontWeight
    --profile-name-line-height: var(--line-height-base); // @presenter LineHeight
    --profile-name-text-color: var(--navbar-text-color); // @presenter Color
-   
+
    --profile-name-padding-horizontal: 0; // @presenter Spacing
    --profile-name-padding-vertical: 0; // @presenter Spacing
    --profile-name-margin-horizontal: 0; // @presenter Spacing
 
-   --profile-avatar-width: 40px; 
+   --profile-avatar-width: 40px;
    --profile-avatar-height: 40px;
    --profile-avatar-border-radius: 50%; // @presenter BorderRadius
 
@@ -2008,7 +2009,7 @@ const userProfile = css`
    --profile-menu-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
    --profile-menu-item-line-height: var(--line-height-base);  // @presenter LineHeight
    --profile-menu-item-text-align: left;
- 
+
    --profile-menu-item-padding-horizontal: 15px; // @presenter Spacing
    --profile-menu-item-padding-vertical: 20px; // @presenter Spacing
 
@@ -2022,7 +2023,7 @@ const userProfile = css`
    --profile-menu-item-separator-line-color: var(--border-color); // @presenter Color
 
    // @tokens End
- 
+
 `;
 
 const modal = css`

package/src/ui/Dropdown.tsx

@@ -34,10 +34,9 @@ const DropDownHeader = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: #fff;
   padding: 8px 10px;
   border-radius: 4px;
-  border: 1px solid #e4e7eb;
+  border: 1px solid var(--border-color);
   font-weight: 600;
   color: var(--text-color);
   background: var(--color-secondary-200);
@@ -65,16 +64,16 @@ const IconWrapper = styled.span`
 `;
 
 const ListItem = styled.div`
-  background-color: #fff;
+  background-color: var(--color-secondary-200);
   padding: 0.4em 10px;
   font-size: 1em;
   color: var(--text-color);
   cursor: pointer;
   &:hover {
-    background-color: rgba(38, 50, 56, 0.12);
+    background-color: var(--color-secondary-300);
   }
   &.active {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: var(--color-secondary-300);
   }
 `;