@redocly/theme 0.18.6 → 0.19.0

package/lib/components/Tag/styledVariables.js

@@ -0,0 +1,148 @@
+"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-large-padding: 4px 16px; //@presenter Spacing
+  --tag-margin: 0 5px 0 0; //@presenter Spacing
+  --tag-gap: 5px; //@presenter Spacing
+
+  /**
+    * @tokens Tag size
+    */
+   
+  .tag-size-large {
+    --tag-padding: var(--tag-large-padding);
+    --tag-font-size: var(--font-size-base);
+  }
+
+  /**
+    * @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);
+  --tag-text-transform: capitalize;
+
+  /**
+    * @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-overlay); // @presenter Color
+    --tag-border-color: var(--border-primary); // @presenter Color
+  }
+
+  .tag-green,
+  .tag-success,
+  .tag-approved,
+  .tag-get {
+    --tag-color: var(--color-success-active); // @presenter Color
+    --tag-background-color: var(--color-success-bg); // @presenter Color
+    --tag-border-color: var(--color-success-active); // @presenter Color
+  }
+
+  .tag-red,
+  .tag-error,
+  .tag-declined,
+  .tag-delete {
+    --tag-color: var(--color-error-active); // @presenter Color
+    --tag-background-color: var(--color-error-bg); // @presenter Color
+    --tag-border-color: var(--color-error-active); // @presenter Color
+  }
+
+  .tag-gold,
+  .tag-warning,
+  .tag-deprecated,
+  .tag-put {
+    --tag-color: var(--color-warning-active); // @presenter Color
+    --tag-background-color: var(--color-warning-bg); // @presenter Color
+    --tag-border-color: var(--color-warning-active); // @presenter Color
+  }
+
+  .tag-blue,
+  .tag-processing,
+  .tag-post {
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-background-color: var(--color-info-bg); // @presenter Color
+    --tag-border-color: var(--color-info-active); // @presenter Color
+  }
+
+  .tag-purple,
+  .tag-head {
+    --tag-color: var(--color-purple-7); // @presenter Color
+    --tag-background-color: var(--color-purple-1); // @presenter Color
+    --tag-border-color: var(--color-purple-7); // @presenter Color
+  }
+
+  .tag-cyan,
+  .tag-option {
+    --tag-color: var(--color-cyan-7); // @presenter Color
+    --tag-background-color: var(--color-cyan-1); // @presenter Color
+    --tag-border-color: var(--color-cyan-7); // @presenter Color
+  }
+
+  .tag-yellow,
+  .tag-patch {
+    --tag-color: var(--color-yellow-7); // @presenter Color
+    --tag-background-color: var(--color-yellow-1); // @presenter Color
+    --tag-border-color: var(--color-yellow-7); // @presenter Color
+  }
+
+  .tag-geekblue,
+  .tag-link {
+    --tag-color: var(--color-geekblue-7); // @presenter Color
+    --tag-background-color: var(--color-geekblue-1); // @presenter Color
+    --tag-border-color: var(--color-geekblue-7); // @presenter Color
+  }
+
+  .tag-magenta,
+  .tag-hook {
+    --tag-color: var(--color-magenta-7); // @presenter Color
+    --tag-background-color: var(--color-magenta-1); // @presenter Color
+    --tag-border-color: var(--color-magenta-7); // @presenter Color
+  }
+
+  .tag-lime {
+    --tag-color: var(--color-lime-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-lime-7); // @presenter Color
+  }
+
+  /**
+    * @tokens Tag http
+    */
+  .tag-http {
+    --tag-text-transform: uppercase;
+  }
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Tiles/ThinTile.js

@@ -36,20 +36,20 @@ const TileHeader_1 = require("../../components/Tiles/TileHeader");
 const ThinTileWrapper = (0, styled_components_1.default)(Link_1.Link) `
   display: flex;
   flex-direction: column;
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  border-radius: var(--border-radius-lg);
   box-sizing: border-box;
-  transition: box-shadow 0.25s ease;
-  padding: 24px;
+  padding: var(--spacing-lg);
   margin-bottom: 20px;
   text-decoration: none;
   width: 100%;
+  color: var(--text-primary);
+  border: 1px solid var(--border-secondary);
   background-color: ${({ bgColor }) => bgColor || 'var(--thin-tile-background-color)'};
   background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
   background-repeat: no-repeat;
 
   :hover {
-    box-shadow: 0 10px 100px 0 rgba(35, 35, 35, 0.2);
+    border-color: var(--border-primary);
   }
 
   ${({ theme }) => theme.mediaQueries.small} {
@@ -81,9 +81,11 @@ const ThinTileIcon = styled_components_1.default.img `
 `;
 const ThinTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader) `
   font-size: 24px;
+  font-weight: var(--font-weight-bold);
   text-align: ${({ align }) => align || 'center'};
 `;
 const ThinTileText = (0, styled_components_1.default)(TileText_1.TileText) `
+  color: var(--text-secondary);
   font-size: 18px;
   line-height: 1.5;
   flex-shrink: 0;

package/lib/components/Tiles/TileHeader.js

@@ -14,7 +14,7 @@ exports.TileHeader = styled_components_1.default.h3.attrs(({ className }) => ({
   color: ${(props) => props.color || 'var(--h3-color)'};
   font-family: var(--h3-font-family);
   && {
-    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
+    margin: 0 0 var(--h3-margin-bottom);
   }
 `;
 //# sourceMappingURL=TileHeader.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/Tiles/WideTile.js

@@ -36,21 +36,21 @@ const TileHeader_1 = require("../../components/Tiles/TileHeader");
 const WideTileWrapper = (0, styled_components_1.default)(Link_1.Link) `
   display: inline-flex;
   flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  color: var(--text-primary);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--border-radius-lg);
   background-color: ${({ bgColor }) => bgColor || 'var(--wide-tile-background-color)'};
   background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
   background-repeat: no-repeat;
-  padding: 24px;
+  padding: var(--spacing-lg);
   padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
-  margin-bottom: 32px;
+  margin-bottom: var(--spacing-xl);
   box-sizing: border-box;
   position: relative;
   text-decoration: none;
   width: 100%;
-  transition: box-shadow 0.25s ease;
   :hover {
-    box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.2);
+    border-color: var(--border-primary);
   }
   :before {
     content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};
@@ -70,17 +70,19 @@ const WideTileWrapper = (0, styled_components_1.default)(Link_1.Link) `
   
   ${({ theme }) => theme.mediaQueries.medium} {
     width: calc(50% - 2em);
-    padding: 32px;
-    padding-right: ${({ disableArrow }) => (disableArrow ? '32px' : '64px')};
+    padding: var(--spacing-xl);
+    padding-right: ${({ disableArrow }) => (disableArrow ? 'var(--spacing-xl)' : '64px')};
     flex-direction: row;
     max-width: ${({ maxWidth }) => maxWidth};
   }
 `;
 const WideTileHeader = (0, styled_components_1.default)(TileHeader_1.TileHeader) `
   font-size: 24px;
+  font-weight: var(--font-weight-bold);
   text-align: ${({ align }) => align || 'left'};
 `;
 const WideTileText = (0, styled_components_1.default)(TileText_1.TileText) `
+  color: var(--text-secondary);
   font-size: 18px;
   text-align: ${({ align }) => align || 'left'};
 `;

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/SectionHeader.js

@@ -9,9 +9,9 @@ exports.SectionHeader = styled_components_1.default.h2.attrs(({ className }) =>
     'data-component-name': 'Typography/SectionHeader',
     className,
 })) `
-  color: var(--h2-color);
+  color: var(--h2-text-color);
   font-size: var(--h2-font-size);
-  font-weight: var(--h2-font-weight);
+  font-weight: var(--font-weight-regular);
   text-align: center;
   margin: 2.65em 0;
   padding: 0 20px;

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

@@ -1,38 +1,29 @@
-export * from './OpenApiDocs/hooks/AfterOpenApiTitle';
-export * from './OpenApiDocs/hooks/AfterOpenApiOperation';
-export * from './OpenApiDocs/hooks/AfterOpenApiOperationSummary';
-export * from './OpenApiDocs/hooks/BeforeOpenApiOperation';
-export * from './OpenApiDocs/hooks/BeforeOpenApiOperationSummary';
-export * from './Button';
-export * from './CopyButton';
-export * from './EditPageButton';
-export * from './JsonViewer';
-export * from './Typography';
-export * from './SidebarLogo';
-export * from './CodeBlock';
-export * from './OpenApiDocs/hooks/OpenApiFooter';
-export * from './OpenApiDocs/hooks/OpenApiHeader';
-export * from './OpenApiDocs/hooks/OpenApiTryItSecurityPanel';
-export * from './Tooltip';
-export * from './Panel';
-export * from './Feedback';
-export * from './OperationBadge';
-export * from './TableOfContent';
-export * from './Profile';
-export * from './ColorModeSwitcher';
-export * from './Sidebar';
-export * from './Markdown';
-export * from './OpenApiDocs';
-export * from './SidebarActions';
-export * from './Filter';
-export * from './Tags';
-export * from './Tabs';
-export * from './Menu';
-export * from './Separator';
-export * from './Cards';
-export * from './Tiles';
-export * from './Breadcrumbs';
-export * from './Catalog';
-export * from './Product';
-export * from './Select';
-export * from './Dropdown';
+export * from '../components/Button';
+export * from '../components/CopyButton';
+export * from '../components/EditPageButton';
+export * from '../components/JsonViewer';
+export * from '../components/Typography';
+export * from '../components/SidebarLogo';
+export * from '../components/CodeBlock';
+export * from '../components/Tooltip';
+export * from '../components/Panel';
+export * from '../components/Feedback';
+export * from '../components/Tag';
+export * from '../components/TableOfContent';
+export * from '../components/Profile';
+export * from '../components/ColorModeSwitcher';
+export * from '../components/Sidebar';
+export * from '../components/Markdown';
+export * from '../components/OpenApiDocs';
+export * from '../components/SidebarActions';
+export * from '../components/Filter';
+export * from '../components/Tabs';
+export * from '../components/Menu';
+export * from '../components/Separator';
+export * from '../components/Cards';
+export * from '../components/Tiles';
+export * from '../components/Breadcrumbs';
+export * from '../components/Catalog';
+export * from '../components/Product';
+export * from '../components/Select';
+export * from '../components/Dropdown';

package/lib/components/index.js

@@ -14,42 +14,33 @@ 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("./OpenApiDocs/hooks/AfterOpenApiTitle"), exports);
-__exportStar(require("./OpenApiDocs/hooks/AfterOpenApiOperation"), exports);
-__exportStar(require("./OpenApiDocs/hooks/AfterOpenApiOperationSummary"), exports);
-__exportStar(require("./OpenApiDocs/hooks/BeforeOpenApiOperation"), exports);
-__exportStar(require("./OpenApiDocs/hooks/BeforeOpenApiOperationSummary"), exports);
-__exportStar(require("./Button"), exports);
-__exportStar(require("./CopyButton"), exports);
-__exportStar(require("./EditPageButton"), exports);
-__exportStar(require("./JsonViewer"), exports);
-__exportStar(require("./Typography"), exports);
-__exportStar(require("./SidebarLogo"), exports);
-__exportStar(require("./CodeBlock"), exports);
-__exportStar(require("./OpenApiDocs/hooks/OpenApiFooter"), exports);
-__exportStar(require("./OpenApiDocs/hooks/OpenApiHeader"), exports);
-__exportStar(require("./OpenApiDocs/hooks/OpenApiTryItSecurityPanel"), exports);
-__exportStar(require("./Tooltip"), exports);
-__exportStar(require("./Panel"), exports);
-__exportStar(require("./Feedback"), exports);
-__exportStar(require("./OperationBadge"), exports);
-__exportStar(require("./TableOfContent"), exports);
-__exportStar(require("./Profile"), exports);
-__exportStar(require("./ColorModeSwitcher"), exports);
-__exportStar(require("./Sidebar"), exports);
-__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);
-__exportStar(require("./Cards"), exports);
-__exportStar(require("./Tiles"), exports);
-__exportStar(require("./Breadcrumbs"), exports);
-__exportStar(require("./Catalog"), exports);
-__exportStar(require("./Product"), exports);
-__exportStar(require("./Select"), exports);
-__exportStar(require("./Dropdown"), exports);
+__exportStar(require("../components/Button"), exports);
+__exportStar(require("../components/CopyButton"), exports);
+__exportStar(require("../components/EditPageButton"), exports);
+__exportStar(require("../components/JsonViewer"), exports);
+__exportStar(require("../components/Typography"), exports);
+__exportStar(require("../components/SidebarLogo"), exports);
+__exportStar(require("../components/CodeBlock"), exports);
+__exportStar(require("../components/Tooltip"), exports);
+__exportStar(require("../components/Panel"), exports);
+__exportStar(require("../components/Feedback"), exports);
+__exportStar(require("../components/Tag"), exports);
+__exportStar(require("../components/TableOfContent"), exports);
+__exportStar(require("../components/Profile"), exports);
+__exportStar(require("../components/ColorModeSwitcher"), exports);
+__exportStar(require("../components/Sidebar"), exports);
+__exportStar(require("../components/Markdown"), exports);
+__exportStar(require("../components/OpenApiDocs"), exports);
+__exportStar(require("../components/SidebarActions"), exports);
+__exportStar(require("../components/Filter"), exports);
+__exportStar(require("../components/Tabs"), exports);
+__exportStar(require("../components/Menu"), exports);
+__exportStar(require("../components/Separator"), exports);
+__exportStar(require("../components/Cards"), exports);
+__exportStar(require("../components/Tiles"), exports);
+__exportStar(require("../components/Breadcrumbs"), exports);
+__exportStar(require("../components/Catalog"), exports);
+__exportStar(require("../components/Product"), exports);
+__exportStar(require("../components/Select"), exports);
+__exportStar(require("../components/Dropdown"), exports);
 //# sourceMappingURL=index.js.map