@redocly/theme 0.18.5 → 0.19.0

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -18,10 +18,6 @@ const BreadcrumbText = styled_components_1.default.div `
 const BreadcrumbWrapper = styled_components_1.default.div `
   border-radius: var(--border-radius);
 
-  &:first-child {
-    padding-left: 0;
-  }
-
   ${(props) => props.isLink &&
     `
     &:hover {
@@ -36,9 +32,10 @@ const BreadcrumbWrapper = styled_components_1.default.div `
 `;
 const BreadcrumbLink = (0, styled_components_1.default)(Link_1.Link) `
   text-decoration: none;
+  color: var(--breadcrumbs-text-color);
 
   &:visited {
-    color: inherit;
+    color: var(--breadcrumbs-text-color);
   }
 `;
 //# sourceMappingURL=Breadcrumb.js.map

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const useBreadcrumbs_1 = require("../../mocks/Sidebar/useBreadcrumbs");
 const telemetry_1 = require("../../mocks/telemetry");
-const Breadcrumb_1 = require("./Breadcrumb");
+const Breadcrumb_1 = require("../../components/Breadcrumbs/Breadcrumb");
 const Breadcrumbs = (props) => {
     const breadcrumbs = (0, useBreadcrumbs_1.useBreadcrumbs)();
     if (breadcrumbs.length === 0) {
@@ -24,7 +24,7 @@ const Breadcrumbs = (props) => {
                         total_breadcrumbs: breadcrumbs.length,
                     });
                 } }),
-            isLast ? null : react_1.default.createElement("div", null, "/")));
+            isLast ? null : react_1.default.createElement("span", null, "/")));
     })));
 };
 exports.Breadcrumbs = Breadcrumbs;
@@ -37,7 +37,11 @@ const Container = styled_components_1.default.div `
   flex-wrap: wrap;
 
   > div {
-    padding-right: var(--breadcrumbs-padding-horizontal);
+    padding: var(--breadcrumbs-padding);
+  }
+
+  > span {
+    padding: var(--breadcrumbs-gap);
   }
 
   @media print {

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

@@ -1,2 +1,3 @@
 export * from '../../components/Breadcrumbs/Breadcrumbs';
 export * from '../../components/Breadcrumbs/Breadcrumb';
+export * from '../../components/Breadcrumbs/styledVariables';

package/lib/components/Breadcrumbs/index.js

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

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

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

package/lib/components/Breadcrumbs/styledVariables.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breadcrumbs = void 0;
+const styled_components_1 = require("styled-components");
+exports.breadcrumbs = (0, styled_components_1.css) `
+  /**
+   * @tokens Breadcrumbs
+   */
+
+  --breadcrumbs-text-color: var(--text-description); // @presenter Color
+  --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
+  --breadcrumbs-active-text-color: var(--text-primary); // @presenter Color
+  --breadcrumbs-hover-text-decoration: underline; // @presenter TextDecoration
+  --breadcrumbs-padding: 0; // @presenter Spacing
+  --breadcrumbs-gap: var(--spacing-xs);
+  --breadcrumbs-margin-bottom: var(--spacing-lg); // @presenter Spacing
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Button/Button.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
-export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
-export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
-export type ButtonVariant = 'outlined' | 'contained';
+export type ButtonSize = 'default' | 'small' | 'large' | string;
+export type ButtonColor = 'default' | 'primary' | string;
+export type ButtonVariant = 'outlined' | 'contained' | 'text';
 export interface ButtonProps {
+    children?: React.ReactNode;
     color?: ButtonColor;
     disabled?: boolean;
     blinking?: boolean;
@@ -12,6 +13,8 @@ export interface ButtonProps {
     size?: ButtonSize;
     extraClass?: string;
     to?: string;
+    icon?: JSX.Element;
+    title?: string;
     onClick?: (e?: any) => void;
 }
 export declare const baseButtonStyles: FlattenSimpleInterpolation;

package/lib/components/Button/Button.js

@@ -45,79 +45,72 @@ const getBlink = () => (0, styled_components_1.keyframes) `
     background-color: var(--button-active-background-color);
   }
 `;
-const getSize = (size = 'medium') => (0, styled_components_1.css) `
+const getSize = (size = 'default') => (0, styled_components_1.css) `
   font-size: var(--button-${size}-font-size);
   padding: var(--button-${size}-padding);
   min-width: var(--button-${size}-min-width);
 `;
 exports.baseButtonStyles = (0, styled_components_1.css) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
   outline: none;
-  border: none;
-  border-radius: var(--button-border-radius);
-  font-weight: var(--button-font-weight);
-  font-size: 14px;
-  padding: 2px 20px;
   margin: var(--button-margin);
   cursor: pointer;
-  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
   line-height: 1;
 
+  color: var(--button-color);
+  background-color: var(--button-background-color);
+  border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
+  border-radius: var(--button-border-radius);
+
+  font-size: var(--button-font-size);
   font-family: var(--button-font-family);
+  font-weight: var(--button-font-weight);
   box-shadow: var(--button-box-shadow);
 
   &:hover {
     box-shadow: var(--button-hover-box-shadow);
+    background-color: var(--button-hover-background-color);
+    border: var(--button-border-width) var(--button-border-style) var(--button-hover-border-color);
   }
 
   &:active {
     box-shadow: var(--button-active-box-shadow);
+    background-color: var(--button-active-background-color);
+    border: var(--button-border-width) var(--button-border-style) var(--button-active-border-color);
   }
 `;
+const StyledButtonLink = (0, styled_components_1.default)(Link_1.Link) `
+  text-decoration: none;
+`;
 const StyledButton = styled_components_1.default.button.attrs(({ color = 'default', extraClass, variant }) => ({
-    className: `button-color-${color}${variant ? ` button-variant-${variant}` : ''}${extraClass ? ` ${extraClass}` : ''}`,
+    className: `button-${color}${variant ? ` button-${variant}` : ''}${extraClass ? ` ${extraClass}` : ''}`,
     'data-component-name': 'Button/Button',
 })) `
-  text-decoration: none;
-  text-align: center;
-
   width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
 
   ${exports.baseButtonStyles}
 
   ${({ variant }) => variant === 'outlined'
     ? (0, styled_components_1.css) `
-          color: var(--button-background-color);
-          border: 2px solid var(--button-border-color);
-          background-color: transparent;
-          &:hover {
-            color: var(--button-hover-background-color);
-            border: 2px solid var(--button-hover-border-color);
-          }
-
-          &:active {
-            color: var(--button-active-background-color);
-            border: 2px solid var(--button-active-border-color);
-          }
-
-          &:disabled {
-            color: var(--button-disabled-color);
-            background-color: transparent;
-          }
+          background-color: var(--button-background-color);
         `
-    : (0, styled_components_1.css) `
+    : variant === 'text'
+        ? (0, styled_components_1.css) `
           color: var(--button-color);
-          border: 2px solid var(--button-background-color);
+          border-color: var(--button-border-color);
           background-color: var(--button-background-color);
+
           &:hover {
-            border: 2px solid var(--button-hover-background-color);
+            color: var(--button-hover-color);
+            border-color: var(--button-hover-border-color);
             background-color: var(--button-hover-background-color);
+            box-shadow: none;
           }
-
-          &:active {
-            border: 2px solid var(--button-active-background-color);
-            background-color: var(--button-active-background-color);
-          }
-        `};
+        `
+        : ''};
 
   ${({ size }) => getSize(size)}
 
@@ -138,18 +131,25 @@ const StyledButton = styled_components_1.default.button.attrs(({ color = 'defaul
         cursor: default;
         color: var(--button-disabled-color);
         background-color: var(--button-disabled-background-color);
-        border-color: var(--button-disabled-background-color);
+        border-color: var(--button-disabled-border-color);
         pointer-events: none;
       }
     `}
 `;
+const StyledIcon = styled_components_1.default.span `
+  display: block;
+  height: var(--button-icon-height);
+  width: var(--button-icon-width);
+`;
 const ButtonComponent = (props) => {
+    const button = (react_1.default.createElement(StyledButton, Object.assign({}, props),
+        props.icon ? react_1.default.createElement(StyledIcon, null, props.icon) : null,
+        props.children));
     if (props.to) {
-        return (react_1.default.createElement(Link_1.Link, { to: props.to },
-            react_1.default.createElement(StyledButton, Object.assign({}, props))));
+        return react_1.default.createElement(StyledButtonLink, { to: props.to }, button);
     }
     else {
-        return react_1.default.createElement(StyledButton, Object.assign({}, props));
+        return button;
     }
 };
 exports.Button = (0, styled_components_1.default)(ButtonComponent) ``;

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

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

package/lib/components/Button/index.js

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

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

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

package/lib/components/Button/styledVariables.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.button = void 0;
+const styled_components_1 = require("styled-components");
+exports.button = (0, styled_components_1.css) `
+  /**
+    * Static classnames that can be used to override styles for components:
+    * download-specification-button, next-section-button, button-base
+    */
+
+  /**
+    * @tokens Button borders
+    */
+
+  --button-border-width: 1px; //@presenter Border
+  --button-border-style: solid; //@presenter Border
+  --button-border-radius: var(--border-radius-md); // @presenter BorderRadius
+  --button-margin: 5px; // @presenter Spacing
+  --button-box-shadow: none; // @presenter Shadow
+  --button-hover-box-shadow: none; // @presenter Shadow
+  --button-active-box-shadow: none; // @presenter Shadow
+
+  /**
+    * @tokens Button typography
+    */
+
+  --button-font-size: var(--font-size-base); // @presenter FontSize
+  --button-font-family: inherit; // @presenter FontFamily
+  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight
+
+  --button-default-font-size: var(--font-size-base); // @presenter FontSize
+  --button-default-padding: 8px 16px;
+
+  --button-small-font-size: var(--font-size-base); // @presenter FontSize
+  --button-small-padding: 4px 8px;
+
+  --button-large-font-size: var(--font-size-lg); // @presenter FontSize
+  --button-large-padding: 8px 16px;
+
+  /**
+    * @tokens Button icon
+    */
+  --button-icon-width: 1em; // @presenter Spacing
+  --button-icon-height: 1em; // @presenter Spacing
+
+  /**
+    * @tokens Button default
+    */
+  .button-default {
+    --button-color: var(--text-primary); // @presenter Color
+    --button-background-color: var(--bg-overlay); // @presenter Color
+    --button-border-color: var(--bg-overlay);
+
+    --button-hover-background-color: var(--bg-overlay); // @presenter Color
+    --button-hover-border-color: var(--border-primary); // @presenter Color
+
+    --button-active-background-color: var(--bg-overlay); // @presenter Color
+    --button-active-border-color: var(--button-color); // @presenter Color
+
+    --button-disabled-color: var(--text-placeholder); // @presenter Color
+    --button-disabled-background-color: var(--bg-raised); // @presenter Color
+    --button-disabled-border-color: var(--border-secondary); // @presenter Color
+  }
+
+  /**
+    * @tokens Button primary
+    */
+  .button-primary {
+    --button-color: var(--text-light-solid); // @presenter Color
+    --button-background-color: var(--color-primary); // @presenter Color
+    --button-border-color: var(--color-primary); // @presenter Color
+    --button-border: 1px solid var(--button-border-color);
+
+    --button-hover-background-color: var(--color-primary-hover); // @presenter Color
+    --button-hover-border-color: var(--color-primary-hover); // @presenter Color
+
+    --button-active-background-color: var(--color-primary-active); // @presenter Color
+    --button-active-border-color: var(--color-primary-active); // @presenter Color
+
+    --button-disabled-color: var(--text-placeholder); // @presenter Color
+    --button-disabled-background-color: var(--bg-raised); // @presenter Color
+    --button-disabled-border-color: var(--border-secondary); // @presenter Color
+  }
+
+  /**
+    * @tokens Button outline
+    */
+  .button-outlined {
+    --button-background-color: transparent; // @presenter Color
+  }
+
+  /**
+    * @tokens Button text
+    */
+  .button-text {
+    --button-color: var(--text-secondary); // @presenter Color
+    --button-border-color: transparent; // @presenter Color
+    --button-background-color: transparent; // @presenter Color
+
+    --button-hover-color: var(--text-primary); // @presenter Color
+    --button-hover-background-color: transparent; // @presenter Color
+    --button-hover-border-color: transparent; // @presenter Color
+  }
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Catalog/Catalog.d.ts

@@ -6,3 +6,9 @@ export default function Catalog(props: {
         catalogConfig: CatalogConfig;
     };
 }): JSX.Element;
+export declare const FilterControls: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CatalogPageContent: import("styled-components").StyledComponent<"main", any, {}, never>;
+export declare const CatalogTitle: import("styled-components").StyledComponent<"h2", any, {}, never>;
+export declare const CatalogDescription: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const CatalogPageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CatalogPageDescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;