@redocly/theme 0.1.8 → 0.1.11

package/src/globalStyle.ts

@@ -1,118 +1,174 @@
-import { createGlobalStyle } from 'styled-components';
+import { createGlobalStyle, css } from 'styled-components';
 
-export const GlobalStyle = createGlobalStyle`
-  /*
-  * Static classnames that can be used to override styles for components:
-  * download-specification-button, next-section-button, button-base
+const baseColors = css`
+  /* === Palette === */
+
+  /**
+    * @tokens Base Colors
+    * @presenter Color
+    */
+  --color-primary-100: #62a1ff;
+  --color-primary-200: #4892ff;
+  --color-primary-300: #2f83ff;
+  --color-primary-400: #1573ff;
+  --color-primary-500: #0065fb;
+  --color-primary-600: #005be2;
+  --color-primary-700: #0050c8;
+  --color-primary-800: #0046af;
+  --color-primary-900: #003c95;
+
+  --color-secondary-100: #ffffff;
+  --color-secondary-200: #f5f7fa;
+  --color-secondary-300: #f3f4f6;
+  --color-secondary-400: #e4e7eb;
+  --color-secondary-500: #d5dae0;
+  --color-secondary-600: #c7cdd5;
+  --color-secondary-700: #b8c0ca;
+  --color-secondary-800: #a9b3c0;
+  --color-secondary-900: #9ba6b5;
+
+  --color-emphasis-100: #ffffff;
+  --color-emphasis-200: #e9eaec;
+  --color-emphasis-300: #cdd0d5;
+  --color-emphasis-400: #b2b6bd;
+  --color-emphasis-500: #969ca6;
+  --color-emphasis-600: #7a828f;
+  --color-emphasis-700: #626974;
+  --color-emphasis-800: #4b5058;
+  --color-emphasis-900: #1c1e21;
+
+  --color-accent-100: #b3dcf3;
+  --color-accent-200: #a6dfff;
+  --color-accent-300: #8cd5ff;
+  --color-accent-400: #73ccff;
+  --color-accent-500: #59c3ff;
+  --color-accent-600: #40baff;
+  --color-accent-700: #26b1ff;
+  --color-accent-800: #0da7ff;
+  --color-accent-900: #009bf2;
+
+  --color-success-100: #98eda0;
+  --color-success-200: #82e98c;
+  --color-success-300: #6ce678;
+  --color-success-400: #57e264;
+  --color-success-500: #41de50;
+  --color-success-600: #2bda3c;
+  --color-success-700: #23c933;
+  --color-success-800: #1fb32d;
+  --color-success-900: #1b9e28;
+
+  --color-warning-100: #ffc966;
+  --color-warning-200: #ffc04d;
+  --color-warning-300: #ffb733;
+  --color-warning-400: #ffae1a;
+  --color-warning-500: #ffa500;
+  --color-warning-600: #e69400;
+  --color-warning-700: #cc8400;
+  --color-warning-800: #b37300;
+  --color-warning-900: #996300;
+
+  --color-error-100: #ffc7c7;
+  --color-error-200: #ffaeae;
+  --color-error-300: #ff9494;
+  --color-error-400: #ff7b7b;
+  --color-error-500: #ff6161;
+  --color-error-600: #ff4747;
+  --color-error-700: #ff2e2e;
+  --color-error-800: #ff1414;
+  --color-error-900: #ff0000;
+
+  // @tokens Other
+`;
+
+const typography = css`
+  /* === Typography === */
+
+  /**
+    * @tokens Typography Colors
+    * @presenter Color
+    */
+  --color-content: #1f2933;
+  --color-content-inverse: var(--color-secondary-200);
+  --color-content-secondary: #7b8794;
+
+  /**
+    * @tokens Font Sizes
+    * @presenter FontSize
+    */
+  --font-size-base: 14px;
+  --font-size-small: 12px;
+
+  /**
+    * @tokens Line Heights
+    * @presenter LineHeight
+    */
+  --line-height-base: 1.5em;
+
+  /**
+    * @tokens Font Weights
+    * @presenter FontWeight
+    */
+  --font-weight-regular: 400;
+  --font-weight-bold: 600;
+  --font-weight-bolder: 700;
+
+  /**
+    * @tokens Font Families
+    * @presenter FontFamily
+    */
+  --font-family-base: Source Sans Pro, sans-serif;
+  --font-family-monospaced: Source Code Pro, monospace;
+
+  /**
+  * @tokens Rendering
   */
-  :root {
-    /* === Palette === */
+  --smoothing: antialiased; // text-smoothing
+  --text-rendering: optimizeSpeed; // text-rendering
 
-    /*
-    * Color palette
+  /**
+  * @tokens Spacings
+  * @presenter Spacing
+  */
+  --spacing-unit: 5px;
+  --spacing-horizontal: calc(var(--spacing-unit) * 8);
+  --spacing-vertical: calc(var(--spacing-unit) * 4);
+
+  // @tokens Other
+`;
+
+const borders = css`
+  /**
+    * @tokens Borders
+    * @presenter Border
     */
-    --color-primary-100: #62a1ff;
-    --color-primary-200: #4892ff;
-    --color-primary-300: #2f83ff;
-    --color-primary-400: #1573ff;
-    --color-primary-500: #0065fb;
-    --color-primary-600: #005be2;
-    --color-primary-700: #0050c8;
-    --color-primary-800: #0046af;
-    --color-primary-900: #003c95;
-
-    --color-secondary-100: #ffffff;
-    --color-secondary-200: #f5f7fa;
-    --color-secondary-300: #f3f4f6;
-    --color-secondary-400: #e4e7eb;
-    --color-secondary-500: #d5dae0;
-    --color-secondary-600: #c7cdd5;
-    --color-secondary-700: #b8c0ca;
-    --color-secondary-800: #a9b3c0;
-    --color-secondary-900: #9ba6b5;
-
-    --color-emphasis-100: #ffffff;
-    --color-emphasis-200: #e9eaec;
-    --color-emphasis-300: #cdd0d5;
-    --color-emphasis-400: #b2b6bd;
-    --color-emphasis-500: #969ca6;
-    --color-emphasis-600: #7a828f;
-    --color-emphasis-700: #626974;
-    --color-emphasis-800: #4b5058;
-    --color-emphasis-900: #1c1e21;
-
-    --color-accent-100: #b3dcf3;
-    --color-accent-200: #a6dfff;
-    --color-accent-300: #8cd5ff;
-    --color-accent-400: #73ccff;
-    --color-accent-500: #59c3ff;
-    --color-accent-600: #40baff;
-    --color-accent-700: #26b1ff;
-    --color-accent-800: #0da7ff;
-    --color-accent-900: #009bf2;
-
-    --color-success-100: #98eda0;
-    --color-success-200: #82e98c;
-    --color-success-300: #6ce678;
-    --color-success-400: #57e264;
-    --color-success-500: #41de50;
-    --color-success-600: #2bda3c;
-    --color-success-700: #23c933;
-    --color-success-800: #1fb32d;
-    --color-success-900: #1b9e28;
-
-    --color-warning-100: #ffc966;
-    --color-warning-200: #ffc04d;
-    --color-warning-300: #ffb733;
-    --color-warning-400: #ffae1a;
-    --color-warning-500: #ffa500;
-    --color-warning-600: #e69400;
-    --color-warning-700: #cc8400;
-    --color-warning-800: #b37300;
-    --color-warning-900: #996300;
-
-    --color-error-100: #ffc7c7;
-    --color-error-200: #ffaeae;
-    --color-error-300: #ff9494;
-    --color-error-400: #ff7b7b;
-    --color-error-500: #ff6161;
-    --color-error-600: #ff4747;
-    --color-error-700: #ff2e2e;
-    --color-error-800: #ff1414;
-    --color-error-900: #ff0000;
-
-    /* === Typography === */
-
-    --color-content: #1f2933;
-    --color-content-inverse: var(--color-secondary-200);
-    --color-content-secondary: #7b8794;
-
-    --font-size-base: 14px;
-    --line-height-base: 1.5em;
-    --font-weight-regular: 400;
-    --font-weight-bold: 600;
-    --font-weight-bolder: 700;
-    --font-family-base: Source Sans Pro, sans-serif;
-    --font-family-monospaced: Source Code Pro, monospace;
-
-    --smoothing: antialiased; // text-smoothing
-    --text-rendering: optimizeSpeed; // text-rendering
+  --global-border-width: 1px;
 
-    /*
-    * Spacing
+  /**
+    * @tokens Border Radius
+    * @presenter BorderRadius
     */
-    --spacing-unit: 5px;
-    --spacing-horizontal: calc(var(--spacing-unit) * 8);
-    --spacing-vertical: calc(var(--spacing-unit) * 4);
+  --global-border-radius: 4px;
 
-    /*
-    * Global
+  /**
+    * @tokens Border Colors
+    * @presenter Color
     */
-    --global-border-radius: 4px;
-    --global-border-width: 1px;
-    --global-border-color: var(--color-secondary-400);
-    --global-border-color-secondary: #616e7c;
-    --global-background-color: transparent;
+  --global-border-color: var(--color-secondary-400);
+  --global-border-color-secondary: #616e7c;
+  --global-background-color: transparent;
+
+  // @tokens Other
+`;
+
+export const styles = css`
+  /*
+  * Static classnames that can be used to override styles for components:
+  * download-specification-button, next-section-button, button-base
+  */
+  :root {
+    ${baseColors}
+    ${typography}
+    ${borders}
 
     /* === Page layout === */
     //TBD
@@ -122,40 +178,48 @@ export const GlobalStyle = createGlobalStyle`
 
     /* === Menu (sidebar) === */
 
+  /**
+    * @tokens Sidebar
+    */
     --sidebar-width: 285px;
-    --sidebar-background-color: #fff;
-    --sidebar-right-line-color: var(--global-border-color);
-    --sidebar-spacing-unit: 8px;
-    --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);
-    --sidebar-spacing-vertical: var(--sidebar-spacing-unit);
+    --sidebar-background-color: #fff; // @presenter Color
+    --sidebar-right-line-color: var(--global-border-color); // @presenter Color
+    --sidebar-spacing-unit: 8px; // @presenter Spacing
+    --sidebar-spacing-horizontal: var(--sidebar-spacing-unit); // @presenter Spacing
+    --sidebar-spacing-vertical: var(--sidebar-spacing-unit); // @presenter Spacing
 
-    --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);
-    --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);
-    --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);
-    --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);
+    --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
+    --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
+    --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
+    --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
 
     --sidebar-word-break: 'inherit';
-    --sidebar-separator-label-color: var(--sidebar-item-color);
-    --sidebar-separator-line-color: #dadada;
-    --sidebar-chevron-color: var(--sidebar-item-color);
-    --sidebar-chevron-size: var(--sidebar-spacing-unit);
-
-    --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);
-    --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);
-    --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);
-    --sidebar-item-border-radius: 4px;
-    --sidebar-item-font-family: var(--font-family-base);
-    --sidebar-item-font-size: var(--font-size-base);
-    --sidebar-item-color: var(--color-content);
-    --sidebar-item-active-color: var(--color-content);
-    --sidebar-item-background-color: #fff;
-    --sidebar-item-active-background-color: var(--global-border-color);
+    --sidebar-separator-label-color: var(--sidebar-item-color); // @presenter Color
+    --sidebar-separator-line-color: #dadada; // @presenter Color
+    --sidebar-chevron-color: var(--sidebar-item-color); // @presenter Color
+    --sidebar-chevron-size: var(--sidebar-spacing-unit); // @presenter Spacing
+
+    --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
+    --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2); // @presenter Spacing
+    --sidebar-item-spacing-offset-nesting: calc(
+      var(--sidebar-spacing-unit) * 2
+    ); // @presenter Spacing
+    --sidebar-item-border-radius: 4px; // @presenter BorderRadius
+    --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
+    --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
+    --sidebar-item-color: var(--color-content); // @presenter Color
+    --sidebar-item-active-color: var(--color-content); // @presenter Color
+    --sidebar-item-background-color: #fff; // @presenter Color
+    --sidebar-item-active-background-color: var(--global-border-color); // @presenter Color
 
     //TBD
     /* === Footer === */
     //TBD
     /* === Table of contents === */
     //TBD
+
+    // @tokens Other
+
     /* === Various components: buttons, inputs, alerts, tooltip === */
 
     /*
@@ -274,8 +338,9 @@ export const GlobalStyle = createGlobalStyle`
     --logo-max-width: 285px;
     --logo-padding: 2px;
 
-    /*
-    * Http colors
+    /**
+    * @tokens HTTP Colors
+    * @presenter Color
     */
     --color-http-get: #3a9601;
     --color-http-post: #0065fb;
@@ -288,8 +353,9 @@ export const GlobalStyle = createGlobalStyle`
     --color-http-head: #a23dad;
     --color-http-hook: var(--color-http-post);
 
-    /*
-    * Response colors
+    /**
+    * @tokens Response colors
+    * @presenter Color
     */
     --response-success-border-color: #b1e996;
     --response-success-background-color: #f6fff4;
@@ -307,6 +373,8 @@ export const GlobalStyle = createGlobalStyle`
     --response-info-background-color: #87ceeb1a;
     --response-info-text-color: var(--response-info-border-color);
 
+    // @tokens Other
+
     /*
     * Panels
     */
@@ -317,7 +385,7 @@ export const GlobalStyle = createGlobalStyle`
     --samples-panel-width: 50%;
     --samples-panel-block-background-color: #fff;
     --samples-panel-background-color: #52606d;
-    --samples-panel-callback-background-color: var(--samples-panel-callback-background-color);
+    --samples-panel-callback-background-color: var(--color-secondary-300);
     --samples-panel-controls-background-color: #323f4b;
     --samples-panel-controls-hover-background-color: #3c4c5a;
     --samples-panel-controls-active-border-color: var(--color-accent-500);
@@ -418,24 +486,56 @@ export const GlobalStyle = createGlobalStyle`
     --linear-progress-background-color: var(--color-accent-100);
 
     /* Floating action button */
-    --fab-color: #0065FB;
+    --fab-color: #0065fb;
     --fab-background-color: #f2f2f2;
-    
+
+    //* PORTAL settings *//
     /**
-     * Portal Logo
+     * Headings
+     * */
+    --h2-font-weight: var(--font-weight-bold);
+
+    --h1-margin-top: 1.35em;
+    --h1-margin-bottom: 0.9em;
+    --h2-margin-top: 1.25em;
+    --h2-margin-bottom: 0.8em;
+    --h3-margin-top: 1.25em;
+    --h3-margin-bottom: 0.8em;
+
+    /**
+     * Footer
+     * */
+    --footer-background-color: var(--color-primary-500);
+    --footer-text-color: #fff;
+
+    /**
+     * Sidebar
+     * */
+    --sidebar-padding-horizontal: var(--sidebar-spacing-unit);
+    --sidebar-padding-vertical: var(--sidebar-spacing-unit);
+
+    --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit);
+    --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit);
+
+    --sidebar-border-radius: 4px;
+    --sidebar-font-size: var(--font-size-base);
+    --sidebar-font-family: var(--font-family-base);
+
+    /**
+     * Logo
      * */
     --logo-height: 2rem;
     --logo-margin: var(--sidebar-margin-left);
 
     /**
-     * Portal Navbar
+     * Navbar
      * */
     --navbar-height: 60px;
-    --navbar-color-text: var(--color-content-inverse);
-    --navbar-color-background: var(--color-primary-500);
+    --navbar-text-color: #fff;
+    --navbar-background-color: var(--color-primary-500);
 
     /**
-     * Portal Navbar Item
+     * Navbar Item
      * */
     --navbar-item-font-size: 16px;
     --navbar-item-margin-horizontal: 0;
@@ -443,7 +543,96 @@ export const GlobalStyle = createGlobalStyle`
     --navbar-item-border-radius: 10px;
     --navbar-item-font-weight: var(--font-weight-bold);
     --navbar-item-active-background-color: #1b75fa;
-    --navbar-item-active-text-color: var(--color-primary-contrast);
+    --navbar-item-active-text-color: var(--navbar-text-color);
     --navbar-item-active-text-decoration: none;
+
+    /**
+     * TOC
+     * */
+    --toc-width: 240px;
+
+    /**
+     * Markdown
+     * */
+    --content-wrapper-max-width: 910px;
+    --content-wrapper-padding-vertical: 25px;
+    --content-wrapper-padding-horizontal: 0px;
+
+    /**
+     * Bloquote
+     * */
+    --bloquote-margin-vertical: 1.5em;
+    --bloquote-margin-horizontal: 0;
+    --bloquote-padding-vertical: 0;
+    --bloquote-padding-horizontal: calc(var(--spacing-unit) * 4);
+    --bloquote-background-color: transparent;
+
+    /**
+     * Admonition
+     * */
+    --admonition-margin-horizontal: 0;
+    --admonition-margin-vertical: calc(var(--spacing-unit) * 2);
+    --admonition-padding-horizontal: calc(var(--spacing-unit) * 4);
+    --admonition-padding-vertical: calc(var(--spacing-unit) * 4);
+    --admonition-icon-size: 25px;
+    --admonition-border-radius: 8px;
+    --admonition-font-size: 16px;
+    --admonition-font-weight: normal;
+    --admonition-line-height: 1.5em;
+    --admonition-heading-font-size: 16px;
+    --admonition-heading-font-weight: var(--font-weight-bold);
+    --admonition-heading-letter-spacing: 0.3px;
+    --admonition-heading-transform: uppercase;
+
+    /**
+    * @tokens Admonition colors
+    * @presenter Color
+    */
+
+    /* info */
+    --admonition-info-background-color: #ebedf0;
+    --admonition-info-text-color: var(--color-content);
+    --admonition-info-icon-color: #4782cb;
+
+    /* attention */
+    --admonition-attention-background-color: #e6eef8;
+    --admonition-attention-text-color: var(--color-content);
+    --admonition-attention-icon-color: #4782cb;
+
+    /* warning */
+    --admonition-warning-background-color: #feeda5;
+    --admonition-warning-text-color: var(--color-content);
+    --admonition-warning-icon-color: #d4ad03;
+
+    /* danger */
+    --admonition-danger-background-color: #fceaea;
+    --admonition-danger-text-color: var(--color-content);
+    --admonition-danger-icon-color: #e53935;
+
+    /* success */
+    --admonition-success-background-color: #ddffe1;
+    --admonition-success-text-color: var(--color-content);
+    --admonition-success-icon-color: #00aa13;
+
+    /*
+    * Portal Search
+    */
+    --input-background-color: rgba(255, 255, 255, 0.1);
+    --input-text-color: #fff;
+    --input-border-radius: 4px;
+    --input-font-size: 16px;
+    --input-font-family: var(--font-family-primary);
+    --input-line-height: 1.15em;
+    --popover-backgrond-color: #fff;
+    --popover-border-radius: 4px;
+    --search-item-text-color: var(--color-content-secondary);
+    --search-item-title-text-color: var(--color-content);
+    --search-item-active-background-color: rgba(0, 68, 212, 0.1);
+
+    // @tokens Other
   }
 `;
+
+export const GlobalStyle = createGlobalStyle`
+  ${styles}
+`;

package/src/hooks/index.ts

@@ -1,7 +1,7 @@
-export * from './useControl';
-export * from './useMount';
-export * from './useUnmount';
-export * from './useActiveHeading';
-export * from './useActiveSectionId';
-export * from './useFullHeight';
-export * from './useNavbarHeight';
+export * from '@theme/hooks/useControl';
+export * from '@theme/hooks/useMount';
+export * from '@theme/hooks/useUnmount';
+export * from '@theme/hooks/useActiveHeading';
+export * from '@theme/hooks/useActiveSectionId';
+export * from '@theme/hooks/useFullHeight';
+export * from '@theme/hooks/useNavbarHeight';

package/src/hooks/useActiveSectionId.ts

@@ -1,14 +1,14 @@
+import { Location } from 'history';
 import { useEffect, useState, useMemo } from 'react';
 import throttle from 'lodash.throttle';
 
 import { useNavbarHeight } from '@theme/hooks/useNavbarHeight';
-import type { MenuProps } from '@theme/types/portal';
 
 export type UseActiveSectionIdReturnType = string;
 
 export function useActiveSectionId(
-  location: MenuProps['location'],
-  hasOverviewPage: boolean,
+  location: Location,
+  hasOverviewPage = false,
 ): UseActiveSectionIdReturnType {
   const [itemId, setItemId] = useState<string>('');
   const navbarHeight = useNavbarHeight(location);

package/src/icons/ShelfIcon/index.ts

@@ -1,2 +1,2 @@
-export { ShelfIcon } from './ShelfIcon';
-export type { ShelfIconProps } from './ShelfIcon';
+export { ShelfIcon } from '@theme/icons/ShelfIcon/ShelfIcon';
+export type { ShelfIconProps } from '@theme/icons/ShelfIcon/ShelfIcon';

package/src/icons/index.ts

@@ -1 +1 @@
-export * from './ShelfIcon';
+export * from '@theme/icons/ShelfIcon';

package/src/index.ts

@@ -13,3 +13,4 @@ export * from './hooks';
 export * from './utils';
 export * from './globalStyle';
 export * from './OperationBadge';
+export * from './TableOfContent';

package/src/mocks/Link.tsx

@@ -1,7 +1,10 @@
-import * as React from 'react';
+import React from 'react';
+import { omit } from 'lodash';
 
 // TODO: use real typings here
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function Link(props: any): JSX.Element {
-  return <a href={props.to} {...props} />;
+  // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
+  const filteredProps = omit(props, ['active']);
+  return <a href={filteredProps.to} {...filteredProps} />;
 }

package/src/mocks/hooks/usePageData.ts

@@ -4,5 +4,8 @@ export function usePageData(): {
   prevPage: ResolvedNavLinkItem | null;
   nextPage: ResolvedNavLinkItem | null;
 } {
-  return { prevPage: null, nextPage: null };
+  return {
+    prevPage: { label: 'Intro', type: 'link', link: '#prev' },
+    nextPage: { label: 'FAQ', type: 'link', link: '#next' },
+  };
 }

package/src/types/portal/index.d.ts

@@ -2,5 +2,4 @@ export * from './src/client/styling';
 export * from './src/client/app/Sidebar/types';
 export * from './src/server/plugins/portal-config/types';
 export * from './src/shared/types';
-export * from './src/server/plugins/versions/types';
 export type { MdHeading } from './src/server/plugins/markdown/types';