@redocly/theme 0.0.0-react18-20231120182601

package/src/ui/darkColors.tsx

@@ -0,0 +1,222 @@
+import { css } from 'styled-components';
+
+export const darkMode = css`
+  /* === Dark Theme Colors  === */
+
+  /**
+    * @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-magenta-1: #291321;
+  --color-magenta-2: #40162f;
+  --color-magenta-3: #551c3b;
+  --color-magenta-4: #75204f;
+  --color-magenta-5: #a02669;
+  --color-magenta-6: #cb2b83;
+  --color-magenta-7: #e0529c;
+  --color-magenta-8: #f37fb7;
+  --color-magenta-9: #f8a8cc;
+  --color-magenta-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-cyan-3);
+  --color-success-bg-hover: var(--color-cyan-2);
+  --color-success-border: var(--color-cyan-3);
+  --color-success-border-hover: var(--color-cyan-4);
+  --color-success-hover: var(--color-cyan-7);
+  --color-success-base: var(--color-cyan-6);
+  --color-success-active: var(--color-cyan-7);
+  --color-success-text-hover: var(--color-cyan-8);
+  --color-success-text: var(--color-cyan-9);
+  --color-success-text-active: var(--color-cyan-10);
+
+  --color-warning-bg: var(--color-gold-3);
+  --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-7);
+  --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-3);
+  --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-7);
+  --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-7);
+  --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: #fffffff2; // Headers, Icon hover
+  --text-secondary: #ffffffcc; // Body text
+  --text-description: #ffffff99; // Caption, Description, Icon
+  --text-placeholder: #ffffff73; // Placeholder text, Disabled text
+  --text-link: var(--color-blue-6);
+
+  /**
+    * @tokens Elevation Colors
+    * @presenter Color
+    */
+
+  --bg-sunken: #2c2d33; // Sunken is the lowest elevation available.
+  --bg-base: #1b1c21; // The default elevation is the baseline with respect to all other layers.
+  --bg-raised: #24262b; // Cards, elements, inputs
+  --bg-overlay: #3a3c42; // Overlay is the highest elevation available. Use for hovers
+  --bg-modal-overlay: #3a3c42c2;
+
+  --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: #ffffff21; // Raised dividers
+  --border-secondary: #ffffff17; // Default dividers, borders
+
+  // @tokens End
+`;

package/src/ui/index.tsx

@@ -0,0 +1,12 @@
+import type React from 'react';
+
+export * from '@theme/ui/Background';
+export * from '@theme/ui/Box';
+export * from '@theme/ui/Flex';
+export * from '@theme/ui/Jumbotron';
+export * from '@theme/ui/ArrowBack';
+export * from '@theme/ui/Highlight';
+
+export const LandingLayout = ({ children }: React.PropsWithChildren<object>): React.ReactNode =>
+  children;
+export const EmptyLayout = LandingLayout;

package/src/utils/ClipboardService.ts

@@ -0,0 +1,25 @@
+import copy from 'copy-to-clipboard';
+export class ClipboardService {
+  static copyCustom(text: string): boolean {
+    return copy(text);
+  }
+
+  static selectElement(element: HTMLDivElement | null): void {
+    if (!element) {
+      return;
+    }
+    let range;
+    let selection;
+    if ((document.body as any).createTextRange) {
+      range = (document.body as any).createTextRange();
+      range.moveToElementText(element);
+      range.select();
+    } else if (document.createRange && window.getSelection) {
+      selection = window.getSelection();
+      range = document.createRange();
+      range.selectNodeContents(element);
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+    }
+  }
+}

package/src/utils/args-typecheck.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function isEmptyArray(items: any): boolean {
+  return Array.isArray(items) && !items?.length;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function isPrimitive(arg: any): boolean {
+  return ['string', 'boolean', 'number', 'undefined'].includes(typeof arg);
+}

package/src/utils/class-names.ts

@@ -0,0 +1,8 @@
+const SPACE_DELIMITER = ' ';
+
+export function concatClassNames(...args: Array<string | undefined>): string {
+  return args
+    .map((className) => (className ? className.trim() : className))
+    .filter(Boolean)
+    .join(SPACE_DELIMITER);
+}

package/src/utils/color.ts

@@ -0,0 +1,12 @@
+export function stringToHslColor(value: string): string {
+  const s = 30;
+  const l = 80;
+  let hash = 0;
+
+  for (let i = 0; i < value.length; i++) {
+    hash = value.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  const h = hash % 360;
+  return `hsl(${h}, ${s}%, ${l}%)`;
+}

package/src/utils/css-variables.ts

@@ -0,0 +1,4 @@
+export const getCssColorVariable = (
+  color: string | undefined,
+  defaultValue = 'currentColor',
+): string => (color?.startsWith('--') ? `var(${color})` : color || defaultValue);

package/src/utils/getNavbarElement.ts

@@ -0,0 +1,10 @@
+export function getNavbarElement(): HTMLElement | null {
+  const navElements = (typeof document !== 'undefined' && document.querySelectorAll('nav')) || [];
+  // there can be multiple nav elements (e.g. mobile and non-mobile), let's use the first one with non-zero height
+  for (let i = 0; i < navElements.length; i++) {
+    if (navElements[i].getBoundingClientRect().height > 1) {
+      return navElements[i];
+    }
+  }
+  return navElements[0] || null;
+}

package/src/utils/highlight.ts

@@ -0,0 +1,94 @@
+import * as Prism from 'prismjs';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-c.js';
+import 'prismjs/components/prism-clike.js';
+import 'prismjs/components/prism-coffeescript.js';
+import 'prismjs/components/prism-cpp.js';
+import 'prismjs/components/prism-csharp.js';
+import 'prismjs/components/prism-go.js';
+import 'prismjs/components/prism-http.js';
+import 'prismjs/components/prism-java.js';
+import 'prismjs/components/prism-lua.js';
+import 'prismjs/components/prism-markdown.js';
+import 'prismjs/components/prism-markup-templating.js'; // dep of php
+import 'prismjs/components/prism-markup.js'; // xml
+import 'prismjs/components/prism-objectivec.js';
+import 'prismjs/components/prism-perl.js';
+import 'prismjs/components/prism-php.js';
+import 'prismjs/components/prism-python.js';
+import 'prismjs/components/prism-ruby.js';
+import 'prismjs/components/prism-scala.js';
+import 'prismjs/components/prism-sql.js';
+import 'prismjs/components/prism-swift.js';
+import 'prismjs/components/prism-graphql.js';
+import 'prismjs/plugins/treeview/prism-treeview.js';
+
+const DEFAULT_LANG = 'clike';
+const NEW_LINE_EXP = /\n(?!$)/g;
+
+Prism.languages.insertBefore(
+  'javascript',
+  'string',
+  {
+    'property string': {
+      pattern: /([{,]\s*)"(?:\\.|[^\\"\r\n])*"(?=\s*:)/i,
+      lookbehind: true,
+    },
+  },
+  undefined,
+);
+
+Prism.languages.insertBefore(
+  'javascript',
+  'punctuation',
+  {
+    property: {
+      pattern: /([{,]\s*)[a-z]\w*(?=\s*:)/i,
+      lookbehind: true,
+    },
+  },
+  undefined,
+);
+
+/**
+ * map language names to Prism.js names
+ */
+export function mapLang(lang: string): string {
+  return (
+    {
+      json: 'js',
+      'c++': 'cpp',
+      'c#': 'csharp',
+      'objective-c': 'objectivec',
+      shell: 'bash',
+      viml: 'vim',
+      curl: 'bash',
+      'node.js': 'js',
+    }[lang] || DEFAULT_LANG
+  );
+}
+
+/**
+ * Highlight source code string using Prism.js
+ * @param source source code to highlight
+ * @param lang highlight language
+ * @return highlighted source code as **html string**
+ */
+export function highlight(source: string | number | boolean, lang: string = DEFAULT_LANG): string {
+  lang = lang.toLowerCase();
+  let grammar = Prism.languages[lang];
+  if (!grammar) {
+    grammar = Prism.languages[mapLang(lang)];
+  }
+  return Prism.highlight(source.toString(), grammar, lang);
+}
+
+export function addLineNumbers(highlightedCode: string, start = 1): string {
+  const codeLines = highlightedCode.split(NEW_LINE_EXP);
+
+  return codeLines
+    .map((line, i) => {
+      return `<span class="code-line" data-line-number=${start + i}>${line}</span>`;
+    })
+    .join('\n');
+}

package/src/utils/index.ts

@@ -0,0 +1,13 @@
+export * from './ClipboardService';
+export * from './css-variables';
+export * from './highlight';
+export * from './jsonToHtml';
+export * from './media-css';
+export * from './theme-helpers';
+export * from './class-names';
+export * from './args-typecheck';
+export * from './color';
+export * from './urls';
+export * from './jsUtils';
+export * from './tags-parser';
+export * from './text-transform';

package/src/utils/isUrl.ts

@@ -0,0 +1,42 @@
+/**
+ * RegExps.
+ * A URL must match #1 and then at least one of #2/#3.
+ * Use two levels of REs to avoid REDOS.
+ */
+
+const protocolAndDomainRE = /^(?:\w+:)?\/\/(\S+)$/;
+
+const localhostDomainRE = /^localhost[:?\d]*(?:[^:?\d]\S*)?$/;
+const nonLocalhostDomainRE = /^[^\s.]+\.\S{2,}$/;
+
+/**
+ * Loosely validate a URL `string`.
+ *
+ * @param {String} input
+ * @return {Boolean}
+ */
+
+export function isUrl(input: unknown): boolean {
+  if (typeof input !== 'string') {
+    return false;
+  }
+
+  const match = input.match(protocolAndDomainRE);
+  if (!match) {
+    return false;
+  }
+
+  const everythingAfterProtocol = match[1];
+  if (!everythingAfterProtocol) {
+    return false;
+  }
+
+  if (
+    localhostDomainRE.test(everythingAfterProtocol) ||
+    nonLocalhostDomainRE.test(everythingAfterProtocol)
+  ) {
+    return true;
+  }
+
+  return false;
+}

package/src/utils/jsUtils.ts

@@ -0,0 +1,18 @@
+export function findDeepFirst<T extends { items?: T[] }>(
+  list: T[],
+  cb: (item: T) => boolean,
+): T | undefined {
+  for (const item of list) {
+    if (cb(item) === true) {
+      return item;
+    }
+    if (item.items) {
+      const nestedRes = findDeepFirst(item.items, cb);
+      if (nestedRes !== undefined) return nestedRes;
+    }
+  }
+}
+
+export function toStringIfDefined(value: unknown): string | undefined {
+  return value == undefined ? undefined : String(value);
+}