@redocly/theme 0.18.3 → 0.18.4-patch.1

package/lib/components/Tag/styledVariables.js

@@ -0,0 +1,140 @@
+"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);
+
+  /**
+    * @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 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

@@ -16,7 +16,7 @@ export * from './OpenApiDocs/hooks/OpenApiTryItSecurityPanel';
 export * from './Tooltip';
 export * from './Panel';
 export * from './Feedback';
-export * from './OperationBadge';
+export * from './Tag';
 export * from './TableOfContent';
 export * from './Profile';
 export * from './ColorModeSwitcher';
@@ -25,7 +25,6 @@ export * from './Markdown';
 export * from './OpenApiDocs';
 export * from './SidebarActions';
 export * from './Filter';
-export * from './Tags';
 export * from './Tabs';
 export * from './Menu';
 export * from './Separator';

package/lib/components/index.js

@@ -32,7 +32,7 @@ __exportStar(require("./OpenApiDocs/hooks/OpenApiTryItSecurityPanel"), exports);
 __exportStar(require("./Tooltip"), exports);
 __exportStar(require("./Panel"), exports);
 __exportStar(require("./Feedback"), exports);
-__exportStar(require("./OperationBadge"), exports);
+__exportStar(require("./Tag"), exports);
 __exportStar(require("./TableOfContent"), exports);
 __exportStar(require("./Profile"), exports);
 __exportStar(require("./ColorModeSwitcher"), exports);
@@ -41,7 +41,6 @@ __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);