@redocly/theme 0.18.1 → 0.18.3-patch.0

package/src/ui/darkColors.tsx

@@ -1,89 +1,221 @@
 import { css } from 'styled-components';
 
 export const darkMode = css`
+  /* === Dark Theme Colors  === */
+
   /**
-     * @tokens Dark Colors
-     * @presenter Color
-     */
-  --background-color: #141414;
-  --footer-background-color: #1f1f1f;
-  --navbar-background-color: #1f1f1f;
-  --mobile-menu-background: #141414;
-  --mobile-menu-profile-background: var(--mobile-menu-background);
-  --mobile-menu-login-button-background: var(--mobile-menu-profile-background);
-  --mobile-menu-item-text-color: rgba(255, 255, 255, 0.6);
-  --mobile-menu-item-active-color: #1f1f1f;
-  --mobile-menu-item-active-text-color: rgba(255, 255, 255, 0.85);
-  --mobile-menu-control-button-color: #ffffff;
-  --mobile-menu-profile-border-color: #222222;
-  --color-primary-500: #57a5fd;
-  --color-primary-300: #15396e;
-  --color-secondary-300: #22262e;
-  --colors-translucent: rgb(50 63 75 / 40%);
-  --inline-code-text-color: #f76663;
-  --color-emphasis-400: #fff;
-  --link-hover-text-color: #57a5fd;
-  --link-text-color: #57a5fd;
-  --code-block-background-color: #1e2633;
-  --admonition-attention-background-color: var(--color-primary-300);
-  --admonition-attention-icon-color: var(--color-emphasis-700);
-  --admonition-warning-background-color: #614b17;
-  --admonition-warning-icon-color: #4c3b12;
-  --admonition-success-background-color: #267e74;
-  --admonition-success-icon-color: #38b9a5;
-  --admonition-danger-background-color: #d6524c;
-  --admonition-danger-icon-color: #d13e37;
-  --admonition-info-background-color: #696969;
-  --admonition-info-icon-color: #505050;
-  --inline-code-background-color: #1e2633;
-  --toc-item-active-background-color: #1e2633;
-  --sidebar-item-active-background-color: #1e2633;
-  --panel-response-success-heading-background-color: #38b9a5;
-  --panel-response-success-border-color: #38b9a5;
-  --panel-response-error-heading-background-color: #d6524c;
-  --panel-response-error-border-color: #d6524c;
-  --panel-samples-heading-background-color: #1e2633;
-  --panel-samples-body-background-color: #263041;
-  --panel-samples-tabs-hover-background-color: #1e2633;
-  --panel-samples-tabs-hover-border-color: #3f4f68;
-  --panel-try-it-action-button-hover-border-color: #2b4cc4;
-  --panel-try-it-action-button-hover-background-color: #2b4cc4;
-  --panel-try-it-action-button-background-color: #0065fb;
-  --button-background-color: #0065fb;
-  --button-border-color: #0065fb;
-  --button-hover-background-color: #2b4cc4;
-  --button-hover-border-color: #2b4cc4;
-  --search-input-background-color: #1b2738;
-  --search-popover-background-color: #1b2738;
-  --search-highlight-text-color: #ffff03;
-  --search-item-text-color: #ffffffcf;
-  --search-item-title-text-color: #ffffff;
-  --search-item-active-text-color: var(--text-color);
-  --search-item-active-title-text-color: var(--text-color);
-  --search-item-active-background-color: #1b2738;
-  --panel-try-it-nested-body-background-color: #263041;
-  --panel-try-it-tabs-active-background-color: #11151d;
-  --panel-try-it-tabs-hover-background-color: #141a26;
-  --color-emphasis-100: #16202e;
-  --color-secondary-400: #696969;
-  --color-emphasis-700: #fff;
-  --color-emphasis-800: #fff;
-  --copy-button-tooltip-text-color: #fff;
-  --copy-button-tooltip-background-color: var(--tooltip-background-color);
-  --tooltip-text-color: #fff;
-  --md-table-head-background-color: var(--color-secondary-300);
-  --md-tabs-hover-tab-border-color: var(--color-secondary-500);
-  --thin-tile-background-color: #1d242d;
-  --wide-tile-background-color: #1d242d;
-  --page-404-header-text-color: #fff;
-  --page-404-description-text-color: #fff;
-  --page-403-header-text-color: #fff;
-  --page-403-description-text-color: #fff;
-  --checkbox-backround-color: var(--color-secondary-900);
-  --checkbox-checked-backround-color: var(--color-primary-400);
-  --select-list-item-active-background-color: #282828;
-  --dropdown-list-item-active-background-color: #282828;
-
-  background-color: var(--background-color);
-  color: var(--text-color);
+    * @tokens Dark Base Colors
+    * @presenter Color
+    */
+
+  --color-red-1: #2c161c;
+  --color-red-2: #451d25;
+  --color-red-3: #5b252f;
+  --color-red-4: #7e2e3c;
+  --color-red-5: #a61d24;
+  --color-red-6: #d32029;
+  --color-red-7: #e84749;
+  --color-red-8: #f37370;
+  --color-red-9: #f89f9a;
+  --color-red-10: #fac8c3;
+
+  --color-green-1: #162312;
+  --color-green-2: #1d3712;
+  --color-green-3: #274916;
+  --color-green-4: #306317;
+  --color-green-5: #3c8618;
+  --color-green-6: #49aa19;
+  --color-green-7: #6abe39;
+  --color-green-8: #8fd460;
+  --color-green-9: #b2e58b;
+  --color-green-10: #d5f2bb;
+
+  --color-gold-1: #2b2111;
+  --color-gold-2: #443111;
+  --color-gold-3: #594214;
+  --color-gold-4: #7c5914;
+  --color-gold-5: #aa7714;
+  --color-gold-6: #d89614;
+  --color-gold-7: #e8b339;
+  --color-gold-8: #f3cc62;
+  --color-gold-9: #f8df8b;
+  --color-gold-10: #faedb5;
+
+  --color-blue-1: #111a2c;
+  --color-blue-2: #112545;
+  --color-blue-3: #15325b;
+  --color-blue-4: #15417e;
+  --color-blue-5: #1554ad;
+  --color-blue-6: #1668dc;
+  --color-blue-7: #3c89e8;
+  --color-blue-8: #65a9f3;
+  --color-blue-9: #8dc5f8;
+  --color-blue-10: #b7dcfa;
+
+  --color-purple-1: #1a1325;
+  --color-purple-2: #24163a;
+  --color-purple-3: #301c4d;
+  --color-purple-4: #3e2069;
+  --color-purple-5: #51258f;
+  --color-purple-6: #642ab5;
+  --color-purple-7: #854eca;
+  --color-purple-8: #ab7ae0;
+  --color-purple-9: #cda8f0;
+  --color-purple-10: #ebd7fa;
+
+  --color-magneta-1: #291321;
+  --color-magneta-2: #40162f;
+  --color-magneta-3: #551c3b;
+  --color-magneta-4: #75204f;
+  --color-magneta-5: #a02669;
+  --color-magneta-6: #cb2b83;
+  --color-magneta-7: #e0529c;
+  --color-magneta-8: #f37fb7;
+  --color-magneta-9: #f8a8cc;
+  --color-magneta-10: #fad2e3;
+
+  --color-cyan-1: #112123;
+  --color-cyan-2: #113536;
+  --color-cyan-3: #144848;
+  --color-cyan-4: #146262;
+  --color-cyan-5: #138585;
+  --color-cyan-6: #13a8a8;
+  --color-cyan-7: #33bcb7;
+  --color-cyan-8: #58d1c9;
+  --color-cyan-9: #84e2d8;
+  --color-cyan-10: #b2f1e8;
+
+  --color-yellow-1: #2b2611;
+  --color-yellow-2: #443b11;
+  --color-yellow-3: #595014;
+  --color-yellow-4: #7c6e14;
+  --color-yellow-5: #aa9514;
+  --color-yellow-6: #d8bd14;
+  --color-yellow-7: #e8d639;
+  --color-yellow-8: #f3ea62;
+  --color-yellow-9: #f8f48b;
+  --color-yellow-10: #fafab5;
+
+  --color-lime-1: #1f2611;
+  --color-lime-2: #2e3c10;
+  --color-lime-3: #3e4f13;
+  --color-lime-4: #536d13;
+  --color-lime-5: #6f9412;
+  --color-lime-6: #8bbb11;
+  --color-lime-7: #a9d134;
+  --color-lime-8: #c9e75d;
+  --color-lime-9: #e4f88b;
+  --color-lime-10: #f0fab5;
+
+  --color-geekblue-1: #131629;
+  --color-geekblue-2: #161d40;
+  --color-geekblue-3: #1c2755;
+  --color-geekblue-4: #203175;
+  --color-geekblue-5: #263ea0;
+  --color-geekblue-6: #2b4acb;
+  --color-geekblue-7: #5273e0;
+  --color-geekblue-8: #7f9ef3;
+  --color-geekblue-9: #a8c1f8;
+  --color-geekblue-10: #d2e0fa;
+
+  --color-primary-bg: #0d086e;
+  --color-primary-bg-hover: #161087;
+  --color-primary-border: #201dad;
+  --color-primary-border-hover: #2f31d4;
+  --color-primary-hover: #6678ff;
+  --color-primary-base: #434dfa;
+  --color-primary-active: #8a99ff;
+  --color-primary-text-hover: #adbcff;
+  --color-primary-text: #d6dfff;
+  --color-primary-text-active: #ebf0ff;
+
+  --color-success-bg: var(--color-green-1);
+  --color-success-bg-hover: var(--color-green-2);
+  --color-success-border: var(--color-green-3);
+  --color-success-border-hover: var(--color-green-4);
+  --color-success-hover: var(--color-green-7);
+  --color-success-base: var(--color-green-6);
+  --color-success-active: var(--color-green-5);
+  --color-success-text-hover: var(--color-green-8);
+  --color-success-text: var(--color-green-9);
+  --color-success-text-active: var(--color-green-10);
+
+  --color-warning-bg: var(--color-gold-1);
+  --color-warning-bg-hover: var(--color-gold-2);
+  --color-warning-border: var(--color-gold-3);
+  --color-warning-border-hover: var(--color-gold-4);
+  --color-warning-hover: var(--color-gold-7);
+  --color-warning-base: var(--color-gold-6);
+  --color-warning-active: var(--color-gold-5);
+  --color-warning-text-hover: var(--color-gold-8);
+  --color-warning-text: var(--color-gold-9);
+  --color-warning-text-active: var(--color-gold-10);
+
+  --color-error-bg: var(--color-red-1);
+  --color-error-bg-hover: var(--color-red-2);
+  --color-error-border: var(--color-red-3);
+  --color-error-border-hover: var(--color-red-4);
+  --color-error-hover: var(--color-red-7);
+  --color-error-base: var(--color-red-6);
+  --color-error-active: var(--color-red-5);
+  --color-error-text-hover: var(--color-red-8);
+  --color-error-text: var(--color-red-9);
+  --color-error-text-active: var(--color-red-10);
+
+  --color-info-bg: var(--color-blue-1);
+  --color-info-bg-hover: var(--color-blue-2);
+  --color-info-border: var(--color-blue-3);
+  --color-info-border-hover: var(--color-blue-4);
+  --color-info-hover: var(--color-blue-7);
+  --color-info-base: var(--color-blue-6);
+  --color-info-active: var(--color-blue-5);
+  --color-info-text-hover: var(--color-blue-8);
+  --color-info-text: var(--color-blue-9);
+  --color-info-text-active: var(--color-blue-10);
+
+  /**
+    * @tokens Dark Main Colors
+    * @presenter Color
+    */
+  --color-bg-base: #ffffff;
+  --color-primary: var(--color-primary-base);
+  --color-error: var(--color-error-base);
+  --color-warning: var(--color-warning-base);
+  --color-success: var(--color-success-base);
+  --color-info: var(--color-info-base);
+
+  /**
+    * @tokens Font Colors
+    * @presenter Color
+    */
+  --text-base: #ffffff; // The base color of the typography color tokens.
+  --text-light-solid: #ffffff; // The color of the objects that need to be white no matter what theme is enabled.
+  --text-primary: #e3e3e3; // Headers, Icon hover
+  --text-secondary: #b3b3b3; // Body text
+  --text-description: #8e8e8e; // Caption, Description, Icon
+  --text-placeholder: #7b7b7b; // Placeholder text, Disabled text
+  --text-link: var(--color-blue-6);
+
+  /**
+    * @tokens Elevation Colors
+    * @presenter Color
+    */
+
+  --bg-sunken: #0d0d0d; // Sunken is the lowest elevation available.
+  --bg-base: #141414; // The default elevation is the baseline with respect to all other layers.
+  --bg-raised: #1f1f1f; // Cards, elements, inputs
+  --bg-overlay: #282828; // Overlay is the highest elevation available. Use for hovers
+
+  --bg-base-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.5); // Elements
+  --bg-raised-shadow: 0px 8px 12px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.5); // Hovers for base. Menu
+  --bg-overlay-shadow: 0px 16px 32px rgba(0, 0, 0, 0.6), 0px 6px 6px rgba(0, 0, 0, 0.4); // Use for dropdowns
+
+  /**
+    * @tokens Border Colors
+    * @presenter Color
+    */
+  --border-primary: #424242; // Raised dividers
+  --border-secondary: #222222; // Default dividers, borders
+
+  // @tokens End
 `;

package/lib/components/OperationBadge/OperationBadge.d.ts

@@ -1,6 +0,0 @@
-export declare const OperationBadge: import("styled-components").StyledComponent<"span", any, {
-    className: `operation-type ${string}`;
-    'data-component-name': string;
-} & {
-    type: string;
-}, "className" | "data-component-name">;

package/lib/components/OperationBadge/OperationBadge.js

@@ -1,68 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OperationBadge = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-exports.OperationBadge = styled_components_1.default.span.attrs((props) => ({
-    className: `operation-type ${props.type}`,
-    'data-component-name': 'OperationBadge/OperationBadge',
-})) `
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--badge-http-font-size);
-  font-family: var(--badge-http-font-family);
-  font-weight: var(--badge-http-font-weight);
-  line-height: var(--badge-http-line-height);
-  color: var(--badge-http-text-color);
-  background-color: var(--badge-background-color);
-  border-radius: var(--badge-http-border-radius);
-  width: 58px;
-  text-transform: uppercase;
-  text-align: center;
-  margin-right: 6px;
-
-  &.get {
-    background-color: var(--color-http-get);
-  }
-
-  &.post {
-    background-color: var(--color-http-post);
-  }
-
-  &.put {
-    background-color: var(--color-http-put);
-  }
-
-  &.options {
-    background-color: var(--color-http-options);
-  }
-
-  &.patch {
-    background-color: var(--color-http-patch);
-  }
-
-  &.delete {
-    background-color: var(--color-http-delete);
-  }
-
-  &.basic,
-  &.schema {
-    background-color: var(--color-http-basic);
-  }
-
-  &.link {
-    background-color: var(--color-http-link);
-  }
-
-  &.head {
-    background-color: var(--color-http-head);
-  }
-
-  &.hook {
-    background-color: var(--color-http-hook);
-  }
-`;
-//# sourceMappingURL=OperationBadge.js.map

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

@@ -1 +0,0 @@
-export * from '../../components/OperationBadge/OperationBadge';

package/lib/components/Tags/Tags.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare function Tags({ tags, className }: {
-    tags: string[];
-    className?: string;
-}): JSX.Element;

package/lib/components/Tags/Tags.js

@@ -1,32 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tags = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Highlight_1 = require("../../ui/Highlight");
-function Tags({ tags, className }) {
-    return (react_1.default.createElement(TagsWrapper, { className: className }, tags.map((tag) => (react_1.default.createElement(Tag, { key: tag, className: 'tag-' + slug(tag) },
-        react_1.default.createElement(Highlight_1.Highlight, null, tag))))));
-}
-exports.Tags = Tags;
-const TagsWrapper = styled_components_1.default.div `
-  margin-top: 16px;
-`;
-const Tag = styled_components_1.default.div `
-  display: inline-block;
-  background-color: #d3f4ef;
-  color: #000;
-  padding: 2px 5px;
-  border-radius: var(--border-radius);
-  margin-right: 5px;
-  margin-bottom: 5px;
-  font-size: 0.8em;
-`;
-// TODO: import from portal
-function slug(str) {
-    return str.replace(/\s/g, '-').toLowerCase();
-}
-//# sourceMappingURL=Tags.js.map

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

@@ -1 +0,0 @@
-export * from './Tags';

package/src/components/Catalog/index.tsx

@@ -1,3 +0,0 @@
-export * from './Catalog';
-export * from './CatalogCard';
-export * from './useCatalog';

package/src/components/OperationBadge/OperationBadge.ts

@@ -1,62 +0,0 @@
-import styled from 'styled-components';
-
-export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
-  className: `operation-type ${props.type}`,
-  'data-component-name': 'OperationBadge/OperationBadge',
-}))<{ type: string }>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--badge-http-font-size);
-  font-family: var(--badge-http-font-family);
-  font-weight: var(--badge-http-font-weight);
-  line-height: var(--badge-http-line-height);
-  color: var(--badge-http-text-color);
-  background-color: var(--badge-background-color);
-  border-radius: var(--badge-http-border-radius);
-  width: 58px;
-  text-transform: uppercase;
-  text-align: center;
-  margin-right: 6px;
-
-  &.get {
-    background-color: var(--color-http-get);
-  }
-
-  &.post {
-    background-color: var(--color-http-post);
-  }
-
-  &.put {
-    background-color: var(--color-http-put);
-  }
-
-  &.options {
-    background-color: var(--color-http-options);
-  }
-
-  &.patch {
-    background-color: var(--color-http-patch);
-  }
-
-  &.delete {
-    background-color: var(--color-http-delete);
-  }
-
-  &.basic,
-  &.schema {
-    background-color: var(--color-http-basic);
-  }
-
-  &.link {
-    background-color: var(--color-http-link);
-  }
-
-  &.head {
-    background-color: var(--color-http-head);
-  }
-
-  &.hook {
-    background-color: var(--color-http-hook);
-  }
-`;

package/src/components/OperationBadge/index.ts

@@ -1 +0,0 @@
-export * from '@theme/components/OperationBadge/OperationBadge';

package/src/components/Tags/Tags.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Highlight } from '@theme/ui/Highlight';
-
-export function Tags({ tags, className }: { tags: string[]; className?: string }) {
-  return (
-    <TagsWrapper className={className}>
-      {tags.map((tag) => (
-        <Tag key={tag} className={'tag-' + slug(tag)}>
-          <Highlight>{tag}</Highlight>
-        </Tag>
-      ))}
-    </TagsWrapper>
-  );
-}
-
-const TagsWrapper = styled.div`
-  margin-top: 16px;
-`;
-
-const Tag = styled.div`
-  display: inline-block;
-  background-color: #d3f4ef;
-  color: #000;
-  padding: 2px 5px;
-  border-radius: var(--border-radius);
-  margin-right: 5px;
-  margin-bottom: 5px;
-  font-size: 0.8em;
-`;
-
-// TODO: import from portal
-function slug(str: string): string {
-  return str.replace(/\s/g, '-').toLowerCase();
-}

package/src/components/Tags/index.ts

@@ -1 +0,0 @@
-export * from './Tags';