@redocly/theme 0.1.7 → 0.1.10

package/src/types/portal/src/server/plugins/types.d.ts

@@ -0,0 +1,55 @@
+import type { PageProps, ResolvedNavItem } from '../../shared/types.js';
+import type { Template } from '../store';
+import type { ContentProvider } from '../utils/content-provider.js';
+export declare type DataLoaderContext = {
+    getRouteByFsPath: (relativePath: string) => RouteDetails;
+    getRouteBySlug: (relativePath: string) => RouteDetails;
+};
+export declare type DataLoader<T = any> = (contentProvider: ContentProvider, context: DataLoaderContext) => Promise<T>;
+export interface RouteDetails {
+    slug: string;
+    fsPath: string;
+    templateId: string;
+    dataLoaders: {
+        props: DataLoader<PageProps>;
+        [k: string]: DataLoader;
+    };
+    getNavText?: () => Promise<string>;
+    getSidebar?(): ResolvedNavItem[];
+}
+export interface PathVersionInfo {
+    version: string;
+    isDefault: boolean;
+    versionFolderId: string;
+}
+export interface ProcessContentActions {
+    addRoute: (route: RouteDetails) => void;
+    createTemplate: (template: Template) => Template;
+    createSharedData(id: string, data: any): string;
+    addRouteSharedData(slug: string, dataKey: string, dataId: string): void;
+}
+export interface AfterRoutesCreatedActions {
+    createSharedData(id: string, data: any): string;
+    addRouteSharedData(routeSlug: string, dataKey: string, dataId: string): void;
+    getRouteByFsPath: (relativePath: string) => RouteDetails;
+    getRouteBySlug: (relativePath: string) => RouteDetails;
+    getAllRoutes: () => RouteDetails[];
+    setGlobalData: (data: Record<string, unknown>) => void;
+    setGlobalConfig: (data: Record<string, unknown>) => void;
+    addRedirect: (from: string, to: {
+        to: string;
+        type: number;
+    }) => void;
+    contentDir: string;
+}
+export interface PluginInstance {
+    watch?: RegExp;
+    processContent?: (content: ContentProvider, actions: ProcessContentActions) => Promise<void>;
+    afterRoutesCreated?: (content: ContentProvider, actions: AfterRoutesCreatedActions) => Promise<void>;
+}
+export interface PluginOptions {
+    contentDir: string;
+    outdir: string;
+    [k: string]: unknown;
+}
+export declare type Plugin = (opts: PluginOptions) => PluginInstance;

package/src/types/portal/src/server/store.d.ts

@@ -0,0 +1,53 @@
+import type { RouteDetails } from './plugins/types.js';
+export declare class Template {
+    absolutePath: string;
+    id: string;
+    hash: string;
+    constructor(absolutePath: string, id: string);
+}
+export declare class Store {
+    contentDir: string;
+    outdir: string;
+    renderMode: 'thread_worker' | 'main';
+    routesBySlug: Map<string, RouteDetails>;
+    routesByFsPath: Map<string, RouteDetails>;
+    routesSharedData: Map<string, Record<string, string>>;
+    sharedData: Map<string, any>;
+    templates: Map<string, Template>;
+    esbuildPlugins: any[];
+    listeners: Map<string, Set<Function>>;
+    globalData: Record<string, unknown>;
+    cliOptions: Record<string, unknown>;
+    globalConfig: {
+        scripts: string;
+        stylesheets: string;
+        redirects: Record<string, {
+            to: string;
+            type: number;
+        }>;
+        [k: string]: unknown;
+    };
+    constructor(contentDir: string, outdir?: string, renderMode?: 'thread_worker' | 'main');
+    on(type: 'routes-updated', cb: () => void | any): void;
+    on(type: 'template-updated', cb: (template: Template) => void | any): void;
+    on(type: 'shared-data-updated', cb: (id: string, data: any) => void): any;
+    on(type: 'global-data-updated', cb: (pathname: string, data: Record<string, unknown>) => void | any): void;
+    runListeners<T extends Array<unknown>>(type: 'template-updated' | 'global-data-updated' | 'shared-data-updated' | 'routes-updated', ...args: T): void;
+    addEsbuildPlugin(plugin: any): void;
+    setGlobalData(data: Record<string, unknown>): void;
+    setCliOptions(data: Record<string, unknown>): void;
+    setGlobalConfig(data: Record<string, unknown>): void;
+    addRedirect(from: string, to: {
+        to: string;
+        type: number;
+    }): void;
+    createSharedData: (id: string, data: any) => string;
+    addRouteSharedData: (routeSlug: string, dataKey: string, dataId: string) => void;
+    addRoute: (route: RouteDetails) => void;
+    getRouteByFsPath: (relativePath: string) => RouteDetails;
+    getRouteBySlug: (slug: string) => RouteDetails;
+    getAllRoutes: () => RouteDetails[];
+    getTemplate: (id: string) => Template;
+    createTemplate: (template: Template) => Template;
+    clear: () => void;
+}

package/src/types/portal/src/server/utils/async.d.ts

@@ -0,0 +1 @@
+export declare function promiseMapLimit<T, P>(array: T[], poolLimit: number, iteratorFn: (arg: T, array: T[]) => Promise<P>): Promise<P[]>;

package/src/types/portal/src/server/utils/content-provider.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="node" />
+import * as chokidar from 'chokidar';
+import * as fs from 'fs';
+import { VersionStore } from '../version-store.js';
+import { PathVersionInfo } from '../plugins/types.js';
+declare type WatchCb = (event: 'add' | 'change' | 'unlink', path: string, stats?: fs.Stats) => Promise<void>;
+export interface ContentRecord {
+    content: string;
+    contentHash: string;
+    relativePath: string;
+    parsed?: any;
+}
+export interface ParsedContentRecord<T = unknown> extends ContentRecord {
+    parsed: T;
+}
+export interface ContentProvider {
+    cwd: string;
+    filesList: Set<string>;
+    versions: VersionStore;
+    loadContent(relativePath: string, parse?: undefined): ContentRecord;
+    loadContent<T = unknown>(relativePath: string, parse: 'yaml'): ParsedContentRecord<T>;
+    loadContent(relativePath: string, parse: 'frontmatter'): ParsedContentRecord<{
+        content: string;
+        data: unknown;
+    }>;
+    loadContent(relativePath: string, parse: 'yaml' | 'frontmatter' | undefined): ParsedContentRecord;
+    getVersionInfoByFsPath: (relativePath: string) => PathVersionInfo;
+    has(relativePath: string): boolean;
+}
+export declare class FsContentProvider implements ContentProvider {
+    #private;
+    cwd: string;
+    private initialContentLoaded;
+    filesList: Set<string>;
+    versions: VersionStore;
+    constructor(cwd: string, initialCache?: Map<string, ContentRecord>);
+    private emit;
+    has(relativePath: string): boolean;
+    getVersionInfoByFsPath(relativePath: string): PathVersionInfo;
+    loadContent(relativePath: string, parse?: undefined): ContentRecord;
+    loadContent(relativePath: string, parse: 'yaml'): ParsedContentRecord<unknown>;
+    loadContent(relativePath: string, parse: 'frontmatter'): ParsedContentRecord<{
+        content: string;
+        data: unknown;
+    }>;
+    watch(test: RegExp, cb: WatchCb): void;
+    stop(): Promise<void>;
+    start(): void;
+    ready(): Promise<chokidar.FSWatcher>;
+}
+export {};

package/src/types/portal/src/server/utils/crypto.d.ts

@@ -0,0 +1,3 @@
+export declare function sha(content: string): string;
+export declare function shaFile(fileName: string): string;
+export declare function shaFileForUrl(fileName: string): string;

package/src/types/portal/src/server/utils/fs.d.ts

@@ -0,0 +1,3 @@
+export declare function readFileAsStringSync(filePath: string): string;
+export declare function readFileNames(dir: string): string[];
+export declare function copyStaticFile(absolutePath: string, outdir: string): string;

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

@@ -0,0 +1,6 @@
+export * from './async.js';
+export * from './crypto.js';
+export * from './fs.js';
+export * from './reporter/reporter.js';
+export * from './content-provider.js';
+export * from './paths.js';

package/src/types/portal/src/server/utils/paths.d.ts

@@ -0,0 +1,13 @@
+import { ContentProvider } from './index.js';
+export declare function getDataFromRelativePath(relativePath: string): {
+    pathVersion: string;
+    basePath: string;
+};
+export declare function generatePagePathname(currentVersion?: string | null, defaultVersion?: string | null, ...combineParts: string[]): string;
+export declare function slugFromRelativePath(relativePath: string, contentProvider: ContentProvider): string;
+export declare function slug(str: string): string;
+export declare function fromCurrentDir(moduleUrl: string, path: string): string;
+export declare function excludeVersion<T extends string[] | string>(arg: T): {
+    version?: string;
+    data: T;
+} | undefined;

package/src/types/portal/src/server/utils/reporter/formatter.d.ts

@@ -0,0 +1,11 @@
+declare const formatter: {
+    success(message: string, ...args: any[]): string;
+    info(message: string, ...args: any[]): string;
+    warn(message: string, ...args: any[]): string;
+    error(message: string, ...args: any[]): string;
+    verbose(message: string, ...args: any[]): string;
+    formatMs(ms: number): string;
+    withTime(message: any, reporter: any): string;
+    format(pattern: string, ...args: any[]): string;
+};
+export default formatter;

package/src/types/portal/src/server/utils/reporter/reporter.d.ts

@@ -0,0 +1,17 @@
+export declare const reporter: {
+    now(): number;
+    startTiming(): void;
+    getTimeSpan(): number;
+    success(message: string, ...args: any[]): void;
+    successTime(message: string, ...args: any[]): void;
+    info(message: string, ...args: any[]): void;
+    infoTime(message: string, ...args: any[]): void;
+    warn(message: string, ...args: any[]): void;
+    warnTime(message: string, ...args: any[]): void;
+    error(message: string, ...args: any[]): void;
+    verbose(message: string, ...args: any[]): void;
+    verboseTime(message: string, ...args: any[]): void;
+    panic(message: string, ...args: any[]): never;
+    panicOnBuild(message: string, ...args: any[]): void;
+    flushErrors(): void;
+};

package/src/types/portal/src/server/utils/yaml.d.ts

@@ -0,0 +1 @@
+export declare function parseYaml<T = unknown>(raw: string): T;

package/src/types/portal/src/server/version-store.d.ts

@@ -0,0 +1,35 @@
+import type { Version } from '../shared/types';
+import { ContentProvider } from './utils/index.js';
+import { PathVersionInfo } from './plugins/types';
+export declare class VersionStore {
+    contentProvider: ContentProvider;
+    private config;
+    constructor(contentProvider: ContentProvider);
+    private parsePath;
+    /**
+     * Goes through config and makes sure each folder has a default version set
+     * By default, versions are sorted alphabetically and last one becomes default
+     */
+    private setDefaultVersions;
+    /**
+     * Checks for nested versions and files in the root of versioned folder
+     * @param allFiles relative paths of all files
+     */
+    private validateVersionsStructure;
+    /**
+     * Read config and store it in the state and mark folder with hasVersionsConfig = true
+     * to prevent versions list from being deducted automatically.
+     * This means that if file strucutre has 3 versions, but config only specifies 2, the list will only have 2
+     * @param versionsFilePath path to versions.yaml
+     */
+    private parseVersionsFile;
+    /**
+     * Reads and validates versions config.
+     * TODO: takes ~200-400ms on tests/starter. Consider partial updates instead of rebuilding if this is becoming a bottleneck
+     * @param allFilePaths
+     */
+    resolveConfig(allFilePaths: Set<string>): void;
+    getPageVersions(pagePath: string, suffix?: string): Version[];
+    getDefaultByPath(path: string): string;
+    getVersionInfoByFsPath(path: string): PathVersionInfo | null;
+}

package/src/types/portal/src/shared/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const RUNTIME_RESOURCES_DIR = "runtime";
+export declare const REDOC_OVERVIEW_ITEM_ID = "overview";
+export declare const PORTAL_CUSTOM_THEMES_FOLDER = "@theme";
+export declare const USER_THEME_ALIAS = "@theme";
+export declare const PUBLIC_STATIC_FOLDER = "/static";
+export declare enum FsErrors {
+    NotExist = "ENOENT"
+}

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

@@ -0,0 +1,116 @@
+/// <reference types="react" />
+export declare type ResolvedNavLinkItem = {
+    type: 'link';
+    link: string;
+    label: string;
+    items?: ResolvedNavItem[];
+    external?: boolean;
+    version?: string;
+    isDefault?: boolean;
+    versionFolderId?: string;
+    httpVerb?: string;
+    separatorLine?: boolean;
+    routeSlug?: string;
+    active?: boolean;
+};
+export declare type ResolvedNavGroupItem = {
+    type: 'group';
+    link?: string;
+    label: string;
+    items: ResolvedNavItem[];
+    version?: string;
+    isDefault?: boolean;
+    versionFolderId?: string;
+    menuStyle?: MenuStyle;
+    separatorLine?: boolean;
+    routeSlug?: string;
+    active?: boolean;
+};
+export declare type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
+    type: 'separator';
+    label?: string;
+    version?: string;
+    isDefault?: boolean;
+    versionFolderId?: string;
+    separatorLine?: boolean;
+    link?: undefined;
+    items?: ResolvedNavItem[];
+} | {
+    type: 'error';
+    version?: string;
+    isDefault?: boolean;
+    versionFolderId?: string;
+    label: string;
+    link?: undefined;
+    items?: ResolvedNavItem[];
+};
+export declare type ResolvedNavItemWithLink = (ResolvedNavLinkItem | ResolvedNavGroupItem) & {
+    link: string;
+};
+export declare type ResolvedSidebar = ResolvedNavItem[];
+export interface PageProps {
+    seo: {
+        title: string;
+    };
+    versions?: Version[];
+    [k: string]: unknown;
+}
+export interface PageData {
+    templateId: string;
+    sharedDataIds: Record<string, string>;
+    props: PageProps;
+}
+export interface CachedPageData extends PageData {
+    Template: React.ComponentType<{
+        pageProps: PageProps;
+    }>;
+}
+export interface ResolvedPageData extends CachedPageData {
+    sharedData: Record<string, unknown>;
+}
+export declare enum MenuStyle {
+    Drilldown = "drilldown"
+}
+export declare type NavItem = {
+    page?: string;
+    directory?: string;
+    group?: string;
+    label?: string;
+    href?: never;
+    items?: NavItem[];
+    separator?: string;
+    separatorLine?: boolean;
+    version?: string;
+    menuStyle?: MenuStyle;
+    external?: boolean;
+};
+export declare type RawNavItem = string | NavItem;
+export interface LogoConfig {
+    image?: string;
+    altText?: string;
+    link?: string;
+    favicon?: string;
+}
+export declare type Version = {
+    version: string;
+    label: string;
+    link: string;
+    default: boolean;
+    active: boolean;
+    notExists?: boolean;
+    folderId: string;
+};
+export declare type VersionConfigItem = {
+    version: string;
+    name?: string;
+};
+export declare type VersionsConfigType = {
+    versions: VersionConfigItem[];
+    default?: string;
+};
+export declare type VersionedFolderConfig = {
+    versionedFiles: Map<string, Set<string>>;
+    defaultVersion?: string;
+    versions: VersionConfigItem[];
+    hasVersionsConfig?: boolean;
+};

package/src/types/portal/src/shared/urls.d.ts

@@ -0,0 +1,8 @@
+export declare function getPageDataUrl(normalizedRoute: string): string;
+export declare function getClientPageDataUrl(normalizedRoute: string): string;
+export declare function getSidebarUrl(id: string): string;
+export declare function getSharedDataUrl(id: string): string;
+export declare const GLOBAL_DATA_URL = "/app-data.json";
+export declare function combineUrls(baseURL: string, ...relativeURLs: string[]): string;
+export declare function withPathPrefix(url: string): string;
+export declare function withoutHash(url: string): string;

package/src/types/portal/src/shared/utils.d.ts

@@ -0,0 +1,10 @@
+export declare const isLocalLink: (path: string) => boolean;
+/**
+ *
+ * @returns url with leading and without trailing slash or empty string, e.g. '/prefix'
+ */
+export declare function getPathPrefix(): string;
+export declare function normalizePathPrefix(prefix: string): string;
+export declare function addLeadingSlash(url: string): string;
+export declare function removeTrailingSlash(url: string): string;
+export declare function getGlobMatcher(glob: string, options?: {}): (file: string) => boolean;

package/src/ui/AlertIcon.tsx

@@ -0,0 +1,111 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IconProps {
+  type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
+  className?: string;
+}
+
+function Icon({ type, className }: IconProps) {
+  switch (type) {
+    case 'warning':
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 15.1c-132.5 0-239.8 107.2-239.8 239.8 0 132.5 107.2 239.8 239.8 239.8 132.5 0 239.8-107.2 239.8-239.8C490.1 122.3 382.8 15.1 250.3 15.1zM250.3 457.1C138.5 457.1 48 366.7 48 254.8 48 143 138.5 52.5 250.3 52.5c111.8 0 202.3 90.5 202.3 202.3C452.6 366.7 362.1 457.1 250.3 457.1z" />
+          <path d="M250.3 135.8c-10.3 0-18.7 8.4-18.7 18.7v120.6c0 10.3 8.4 18.7 18.7 18.7s18.7-8.4 18.7-18.7V154.5C269 144.2 260.7 135.8 250.3 135.8z" />
+          <circle cx="250.3" cy="342.1" r="25.3" />
+        </svg>
+      );
+    case 'success':
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" />
+          <path d="M224.7 349.6c8.5 5.9 20.2 3.8 26.1-4.6L355 195.7c5.9-8.5 3.8-20.2-4.6-26.1s-20.2-3.8-26.1 4.6L220 323.5C214.1 332 216.2 343.7 224.7 349.6z" />
+          <path d="M247.1 346.2c7.3-7.3 7.3-19.2 0-26.5l-55.9-55.9c-7.3-7.3-19.2-7.3-26.5 0s-7.3 19.2 0 26.5l55.9 55.9C228 353.5 239.8 353.5 247.1 346.2z" />
+        </svg>
+      );
+    case 'danger':
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 490.1c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 382.8 117.8 490.1 250.3 490.1zM250.3 48c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 452.6 48 362.1 48 250.3 48 138.5 138.5 48 250.3 48z" />
+          <path d="M168.4 332.2c7.3 7.3 19.2 7.3 26.5 0l137.3-137.3c7.3-7.3 7.3-19.2 0-26.5 -7.3-7.3-19.2-7.3-26.5 0L168.4 305.7C161.1 313 161.1 324.9 168.4 332.2z" />
+          <path d="M168.4 168.4c-7.3 7.3-7.3 19.2 0 26.5l137.3 137.3c7.3 7.3 19.2 7.3 26.5 0 7.3-7.3 7.3-19.2 0-26.5L194.9 168.4C187.6 161.1 175.7 161.1 168.4 168.4z" />
+        </svg>
+      );
+    case 'attention':
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 301.8c-8.3 0-15-6.7-15-15V181.9c0-8.3 6.7-15 15-15 8.3 0 15 6.7 15 15v104.9C265.3 295.1 258.6 301.8 250.3 301.8zM483.7 377L297.2 66.1c-21.2-35.3-72.6-35.4-93.8 0L16.9 377c-17.6 29.4 3.6 67.1 38 67.1h390.8C480.1 444.1 501.4 406.4 483.7 377L483.7 377zM445.7 414.1H54.9c-11.2 0-18-12.2-12.3-21.7L229.1 81.5c9.6-16 32.8-16 42.4 0L458 392.4C463.7 401.9 456.9 414.1 445.7 414.1z" />
+          <circle cx="250.3" cy="339.2" r="22.5" />
+        </svg>
+      );
+    default:
+      return (
+        <svg
+          className={className}
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.1"
+          id="Layer_1"
+          x="0"
+          y="0"
+          viewBox="0 0 500.6 500.6"
+          enableBackground="new 0 0 500.6 500.6"
+        >
+          <path d="M250.3 490.7c132.5 0 239.8-107.2 239.8-239.8 0-132.5-107.2-239.8-239.8-239.8 -132.5 0-239.8 107.2-239.8 239.8C10.6 383.5 117.8 490.7 250.3 490.7zM250.3 48.6c111.8 0 202.3 90.5 202.3 202.3 0 111.8-90.5 202.3-202.3 202.3C138.5 453.2 48 362.7 48 250.9 48 139.1 138.5 48.6 250.3 48.6z" />
+          <path d="M250.3 370c10.3 0 18.7-8.4 18.7-18.7V230.6c0-10.3-8.4-18.7-18.7-18.7 -10.3 0-18.7 8.4-18.7 18.7v120.6C231.6 361.6 240 370 250.3 370z" />
+          <circle cx="250.3" cy="163.7" r="25.3" />
+        </svg>
+      );
+  }
+}
+
+export const AlertIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'ui/AlertIcon',
+}))`
+  position: absolute;
+  left: var(--admonition-padding-horizontal);
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--admonition-icon-size);
+  height: var(--admonition-icon-size);
+  margin-right: var(--admonition-padding-horizontal);
+  flex-shrink: 0;
+
+  fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};
+`;

package/src/ui/Arrow.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ArrowProps {
+  direction?: string;
+}
+
+function directionToTransform({ direction }: ArrowProps) {
+  switch (direction) {
+    case 'up':
+      return 180;
+    case 'right':
+      return -90;
+    case 'left':
+      return 90;
+    default:
+      return 0;
+  }
+}
+
+const Icon = ({ className }: { className?: string }) => (
+  <span data-component-name="ui/Arrow/Arrow">
+    <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 5" className={className}>
+      <path d="M3.5 2.51L5.806.205a.7.7 0 01.99.99l-2.8 2.8a.698.698 0 01-.99 0l-2.8-2.8a.7.7 0 11.99-.99L3.5 2.51z" />
+    </svg>
+  </span>
+);
+
+export const Arrow = styled(Icon)`
+  width: var(--sidebar-chevron-size);
+  height: var(--sidebar-chevron-size);
+  fill: var(--sidebar-chevron-color);
+  transform: rotate(${directionToTransform}deg);
+
+  vertical-align: middle;
+`;

package/src/ui/Background.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+import { Flex } from '@theme/ui/Flex';
+
+export const Background = styled(Flex).attrs(() => ({
+  'data-component-name': 'ui/Background',
+}))`
+  background: var(--navbar-background-color);
+  color: var(--navbar-text-color);
+  font-family: var(--h-font-family);
+
+  a:not([role='button']),
+  a:not([role='button']):hover {
+    color: var(--navbar-text-color);
+  }
+`;

package/src/ui/Box.tsx

@@ -0,0 +1,39 @@
+import {
+  space,
+  position,
+  flex,
+  textAlign,
+  color,
+  border,
+  layout,
+  SpaceProps,
+  LayoutProps,
+  TextAlignProps,
+  ColorProps,
+  PositionProps,
+  FlexProps,
+  BordersProps,
+} from 'styled-system';
+import styled from 'styled-components';
+
+export interface BoxProps
+  extends SpaceProps,
+    LayoutProps,
+    PositionProps,
+    FlexProps,
+    TextAlignProps,
+    ColorProps,
+    BordersProps {}
+
+export const Box = styled.div.attrs(() => ({
+  'data-component-name': 'ui/Box',
+}))<BoxProps>`
+  max-width: 100%;
+  ${space}
+  ${layout}
+  ${position}
+  ${flex}
+  ${textAlign}
+  ${color}
+  ${border}
+`;

package/src/ui/Button.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { LinkProps } from 'react-router-dom';
+
+import { Button as RefDocsButton, ButtonProps } from '@theme/Button';
+import { Link } from '@portal/Link';
+
+const StyledButtonAsLink = RefDocsButton.withComponent(Link);
+
+export function Button(
+  props: ButtonProps & Partial<LinkProps<never>> & { ref?: any; external?: boolean },
+): JSX.Element {
+  if (props.to) {
+    return <StyledButtonAsLink {...props} role="button" data-component-name="ui/Button" />;
+  } else {
+    return (
+      <RefDocsButton {...(props as ButtonProps)} role="button" data-component-name="ui/Button" />
+    );
+  }
+}