@redocly/theme 0.1.8 → 0.1.11

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

@@ -1,77 +1,116 @@
 /// <reference types="react" />
-import type { PageProps } from '../server/store';
 export declare type ResolvedNavLinkItem = {
-  type: 'link';
-  link: string;
-  label: string;
-  items?: ResolvedNavItem[];
-  external?: boolean;
-  version?: string;
-  default?: string;
-  httpVerb?: string;
-  separatorLine?: boolean;
-  active?: boolean;
+    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;
-  default?: string;
-  menuStyle?: MenuStyle;
-  separatorLine?: boolean;
-  active?: boolean;
+    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 ResolvedNavItem =
-  | ResolvedNavLinkItem
-  | ResolvedNavGroupItem
-  | {
-      type: 'separator';
-      label?: string;
-      separatorLine?: boolean;
-    }
-  | {
-      type: 'error';
-      label: string;
-    };
 export declare type ResolvedSidebar = ResolvedNavItem[];
+export interface PageProps {
+    seo: {
+        title: string;
+    };
+    versions?: Version[];
+    [k: string]: unknown;
+}
 export interface PageData {
-  templateId: string;
-  sidebarId?: string;
-  dataDependencies?: string[];
-  props: PageProps;
+    templateId: string;
+    sharedDataIds: Record<string, string>;
+    props: PageProps;
 }
 export interface CachedPageData extends PageData {
-  Template: React.ComponentType<{
-    pageProps: PageProps;
-    resolvedDataDependencies?: Record<string, unknown>[];
-  }>;
+    Template: React.ComponentType<{
+        pageProps: PageProps;
+    }>;
 }
 export interface ResolvedPageData extends CachedPageData {
-  sidebar: ResolvedSidebar;
-  resolvedDataDependencies?: Record<string, unknown>[];
+    sharedData: Record<string, unknown>;
 }
 export declare enum MenuStyle {
-  Drilldown = 'drilldown',
+    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;
+    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;
+    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

@@ -2,6 +2,7 @@ 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 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/ui/AlertIcon.tsx

@@ -1,8 +1,9 @@
-import React, { HTMLProps } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
-interface IconProps extends HTMLProps<HTMLElement> {
+interface IconProps {
   type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
+  className?: string;
 }
 
 function Icon({ type, className }: IconProps) {
@@ -98,13 +99,13 @@ export const AlertIcon = styled(Icon).attrs(() => ({
   'data-component-name': 'ui/AlertIcon',
 }))`
   position: absolute;
-  left: var(--alert-padding-horizontal);
+  left: var(--admonition-padding-horizontal);
   top: 50%;
   transform: translateY(-50%);
-  width: var(--alert-icon-size);
-  height: var(--alert-icon-size);
-  margin-right: var(--alert-padding-horizontal);
+  width: var(--admonition-icon-size);
+  height: var(--admonition-icon-size);
+  margin-right: var(--admonition-padding-horizontal);
   flex-shrink: 0;
 
-  fill: ${({ type }) => `var(--alert-${type}-icon-color)`};
+  fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};
 `;

package/src/ui/Background.tsx

@@ -5,12 +5,12 @@ import { Flex } from '@theme/ui/Flex';
 export const Background = styled(Flex).attrs(() => ({
   'data-component-name': 'ui/Background',
 }))`
-  background: var(--navbar-color-background);
-  color: var(--color-primary-contrast);
+  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(--color-primary-contrast);
+    color: var(--navbar-text-color);
   }
 `;

package/src/ui/Dropdown.tsx

@@ -39,7 +39,7 @@ const DropDownHeader = styled.div`
   border-radius: 4px;
   border: 1px solid #e4e7eb;
   font-weight: 600;
-  color: var(--color-text-main);
+  color: var(--color-content);
   background: var(--color-secondary-300);
 `;
 
@@ -65,10 +65,10 @@ const IconWrapper = styled.span`
 `;
 
 const ListItem = styled.div`
-  background-color: var(--background-color);
+  background-color: #fff;
   padding: 0.4em 10px;
   font-size: 1em;
-  color: var(--color-text-main);
+  color: var(--color-content);
   cursor: pointer;
   &:hover {
     background-color: rgba(38, 50, 56, 0.12);
@@ -81,10 +81,10 @@ const ListItem = styled.div`
 const DropDownLink = styled(Link)`
   display: block;
   text-decoration: none;
-  color: var(--color-text-main);
+  color: var(--color-content);
 `;
 
-export default function Dropdown({ items, activeItem }: DropdownProps): JSX.Element {
+export function Dropdown({ items, activeItem }: DropdownProps): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
   const toggling = () => setIsOpen(!isOpen);

package/src/ui/Jumbotron.tsx

@@ -25,7 +25,7 @@ export const Jumbotron = styled(Background).attrs(() => ({
   ${({ bgImage, bgColor }) =>
     bgImage &&
     `
-      background: ${bgColor || 'var(--color-primary-main)'} url(${bgImage});
+      background: ${bgColor || 'var(--color-content)'} url(${bgImage});
       background-repeat: no-repeat;
       background-size: cover;
       background-position: center;
@@ -37,7 +37,7 @@ export const Jumbotron = styled(Background).attrs(() => ({
   `};
   ${space}
   ${H1}, ${H2} {
-    color: ${({ textColor }) => textColor || 'var(--navbar-color-text)'};
+    color: ${({ textColor }) => textColor || 'var(--navbar-text-color)'};
     text-align: center;
     padding: 0;
   }
@@ -50,7 +50,7 @@ export const Jumbotron = styled(Background).attrs(() => ({
   h2 {
     font-size: 1.875em;
     line-height: 1;
-    font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-regular);
     margin: 0;
     margin-bottom: 2em;
   }

package/src/ui/Tiles/TileHeader.ts

@@ -5,7 +5,7 @@ export const TileHeader = styled.h3.attrs(() => ({
 }))<{ color?: string }>`
   font-weight: var(--font-weight-bold);
   line-height: 1.25;
-  color: ${(props) => props.color || 'var(--color-primary-main)'};
+  color: ${(props) => props.color || 'var(--color-content)'};
   font-family: var(--h-font-family);
   && {
     margin: 0 0 0.5em;

package/src/ui/Tiles/TileText.tsx

@@ -6,7 +6,7 @@ export const TileText = styled.span.attrs(() => ({
   display: inline-block;
   font-weight: var(--font-weight-regular);
   overflow: hidden;
-  color: ${(props) => props.color || 'var(--color-text-main)'};
+  color: ${(props) => props.color || 'var(--color-content)'};
   line-height: 1.25;
-  font-family: var(--font-family-primary);
+  font-family: var(--font-family-base);
 `;

package/src/ui/Tiles/index.ts

@@ -0,0 +1,4 @@
+export * from '@theme/ui/Tiles/ThinTile';
+export * from '@theme/ui/Tiles/TileHeader';
+export * from '@theme/ui/Tiles/TileText';
+export * from '@theme/ui/Tiles/WideTile';

package/src/ui/Typography.tsx

@@ -19,33 +19,33 @@ export interface ITypography {
 export const typographyTokens = {
   typography: {
     fontSize: 'var(--font-size-base)',
-    fontFamily: 'var(--font-family-h)',
-    lineHeight: 'var(--line-height-m)',
+    fontFamily: 'var(--h-font-family)',
+    lineHeight: 'var(--line-height-base)',
   },
   heading1: {
     fontSize: 'var(--h1-font-size)',
-    fontFamily: 'var(--font-family-h)',
+    fontFamily: 'var(--h-font-family)',
     fontWeight: 'var(--font-weight-bold)',
     lineHeight: 'var(--h1-line-height)',
-    color: 'var(--color-text-main)',
+    color: 'var(--color-content)',
     marginTop: 'var(--h1-margin-top)',
     marginBottom: 'var(--h1-margin-bottom)',
   },
   heading2: {
     fontSize: 'var(--h2-font-size)',
-    fontFamily: 'var(--font-family-h)',
+    fontFamily: 'var(--h-font-family)',
     fontWeight: 'var(--font-weight-bold)',
     lineHeight: 'var(--h2-line-height)',
-    color: 'var(--color-text-main)',
+    color: 'var(--color-content)',
     marginTop: 'var(--h2-margin-top)',
     marginBottom: 'var(--h2-margin-bottom)',
   },
   heading3: {
     fontSize: 'var(--h3-font-size)',
-    fontFamily: 'var(--font-family-h)',
+    fontFamily: 'var(--h-font-family)',
     fontWeight: 'var(--font-weight-bold)',
     lineHeight: 'var(--h3-line-height)',
-    color: 'var(--color-text-main)',
+    color: 'var(--color-content)',
     marginTop: 'var(--h3-margin-top)',
     marginBottom: 'var(--h3-margin-bottom)',
   },
@@ -53,19 +53,19 @@ export const typographyTokens = {
   heading5: {},
   heading6: {},
   blockquote: {
-    color: 'var(--color-text-main)',
+    color: 'var(--color-content)',
   },
   alert: {
-    fontSize: 'var(--alert-font-size)',
-    fontWeight: 'var(--alert-font-weight)',
-    lineHeight: 'var(--alert-line-height)',
-    marginTop: 'var(--alert-margin-vertical)',
-    marginBottom: 'var(-alert-margin-vartical)',
+    fontSize: 'var(--admonition-font-size)',
+    fontWeight: 'var(--admonition-font-weight)',
+    lineHeight: 'var(--admonition-line-height)',
+    marginTop: 'var(--admonition-margin-vertical)',
+    marginBottom: 'var(--admonition-margin-vertical)',
     heading: {
-      fontSize: 'var(--alert-heading-font-size)',
-      fontWeight: 'var(--alert-heading-font-weight)',
-      lineHeight: 'var(--alert-line-height)',
-      transform: 'var(--alert-heading-transform)',
+      fontSize: 'var(--admonition-heading-font-size)',
+      fontWeight: 'var(--admonition-heading-font-weight)',
+      lineHeight: 'var(--admonition-line-height)',
+      transform: 'var(--admonition-heading-transform)',
     },
   },
 };
@@ -134,13 +134,13 @@ export const H3 = styled.h1.attrs(() => ({
 `;
 
 export const SectionHeader = styled.h2`
-  color: var(--color-primary-main);
+  color: var(--h-color);
   font-size: 1.75em;
-  font-weight: var(--font-weight-light);
+  font-weight: var(--font-weight-regular);
   text-align: center;
   margin: 2.65em 0;
   padding: 0px 20px;
-  font-family: var(--font-family-h);
+  font-family: var(--h-font-family);
 `;
 
 export const Typography = styled.p.attrs(() => ({
@@ -153,7 +153,7 @@ export const Typography = styled.p.attrs(() => ({
   }
 >`
   ${typography(typographyTokens.typography)};
-  color: var(--color-text-main);
+  color: var(--color-content);
   ${color}
   margin-top: ${({ mt }) => mt || '1em'};
   margin-bottom: ${({ mb }) => mb || '1em'};

package/src/ui/UniversalLink.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { useLocation, LinkProps } from 'react-router-dom';
 import styled from 'styled-components';
 
-import isUrl from '@theme/utils/isUrl';
-import replaceHashInColor from '@theme/utils/replaceHashInColor';
+import { isUrl } from '@theme/utils/isUrl';
+import { replaceHashInColor } from '@theme/utils/replaceHashInColor';
 import { Link } from '@portal/Link';
 
 const StyledExternalLink = styled.a`

package/src/ui/index.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
-export * from '@theme/ui/Button';
+
+export * from '@theme/ui/Tiles';
+export * from '@theme/ui/AlertIcon';
+export * from '@theme/ui/Arrow';
+export * from '@theme/ui/Background';
 export * from '@theme/ui/Box';
+export * from '@theme/ui/Button';
+export * from '@theme/ui/Dropdown';
 export * from '@theme/ui/Flex';
 export * from '@theme/ui/Jumbotron';
 export * from '@theme/ui/Typography';
-export * from '@theme/ui/Tiles/WideTile';
-export * from '@theme/ui/Tiles/ThinTile';
+export * from '@theme/ui/UniversalLink';
 
 export const LandingLayout = ({ children }: React.PropsWithChildren<object>): React.ReactNode =>
   children;

package/src/utils/isUrl.ts

@@ -16,7 +16,7 @@ const nonLocalhostDomainRE = /^[^\s.]+\.\S{2,}$/;
  * @return {Boolean}
  */
 
-export default function isUrl(string: string): boolean {
+export function isUrl(string: string): boolean {
   if (typeof string !== 'string') {
     return false;
   }

package/src/utils/replaceHashInColor.ts

@@ -1,3 +1,3 @@
-export default function replaceHashInColor(color: string): string {
+export function replaceHashInColor(color: string): string {
   return color.replace('#', '%23');
 }

package/ui/AlertIcon.d.ts

@@ -1,6 +1,7 @@
-import { HTMLProps } from 'react';
-interface IconProps extends HTMLProps<HTMLElement> {
+/// <reference types="react" />
+interface IconProps {
     type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
+    className?: string;
 }
 declare function Icon({ type, className }: IconProps): JSX.Element;
 export declare const AlertIcon: import("styled-components").StyledComponent<typeof Icon, any, {

package/ui/AlertIcon.js

@@ -38,8 +38,8 @@ function Icon(_a) {
 }
 exports.AlertIcon = (0, styled_components_1.default)(Icon).attrs(function () { return ({
     'data-component-name': 'ui/AlertIcon',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: var(--alert-padding-horizontal);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--alert-icon-size);\n  height: var(--alert-icon-size);\n  margin-right: var(--alert-padding-horizontal);\n  flex-shrink: 0;\n\n  fill: ", ";\n"], ["\n  position: absolute;\n  left: var(--alert-padding-horizontal);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--alert-icon-size);\n  height: var(--alert-icon-size);\n  margin-right: var(--alert-padding-horizontal);\n  flex-shrink: 0;\n\n  fill: ", ";\n"])), function (_a) {
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: var(--admonition-padding-horizontal);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--admonition-icon-size);\n  height: var(--admonition-icon-size);\n  margin-right: var(--admonition-padding-horizontal);\n  flex-shrink: 0;\n\n  fill: ", ";\n"], ["\n  position: absolute;\n  left: var(--admonition-padding-horizontal);\n  top: 50%;\n  transform: translateY(-50%);\n  width: var(--admonition-icon-size);\n  height: var(--admonition-icon-size);\n  margin-right: var(--admonition-padding-horizontal);\n  flex-shrink: 0;\n\n  fill: ", ";\n"])), function (_a) {
     var type = _a.type;
-    return "var(--alert-".concat(type, "-icon-color)");
+    return "var(--admonition-".concat(type, "-icon-color)");
 });
 var templateObject_1;

package/ui/Background.js

@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var Flex_1 = require("../ui/Flex");
 exports.Background = (0, styled_components_1.default)(Flex_1.Flex).attrs(function () { return ({
     'data-component-name': 'ui/Background',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: var(--navbar-color-background);\n  color: var(--color-primary-contrast);\n  font-family: var(--h-font-family);\n\n  a:not([role='button']),\n  a:not([role='button']):hover {\n    color: var(--color-primary-contrast);\n  }\n"], ["\n  background: var(--navbar-color-background);\n  color: var(--color-primary-contrast);\n  font-family: var(--h-font-family);\n\n  a:not([role='button']),\n  a:not([role='button']):hover {\n    color: var(--color-primary-contrast);\n  }\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: var(--navbar-background-color);\n  color: var(--navbar-text-color);\n  font-family: var(--h-font-family);\n\n  a:not([role='button']),\n  a:not([role='button']):hover {\n    color: var(--navbar-text-color);\n  }\n"], ["\n  background: var(--navbar-background-color);\n  color: var(--navbar-text-color);\n  font-family: var(--h-font-family);\n\n  a:not([role='button']),\n  a:not([role='button']):hover {\n    color: var(--navbar-text-color);\n  }\n"])));
 var templateObject_1;

package/ui/Dropdown.d.ts

@@ -4,5 +4,5 @@ declare type DropdownProps = {
     items: Version[];
     activeItem: Version;
 };
-export default function Dropdown({ items, activeItem }: DropdownProps): JSX.Element;
+export declare function Dropdown({ items, activeItem }: DropdownProps): JSX.Element;
 export {};

package/ui/Dropdown.js

@@ -18,17 +18,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Link_1 = require("../mocks/Link");
 var Icon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, { children: (0, jsx_runtime_1.jsx)("polyline", { points: "6 9 12 15 18 9" }) }))); };
 var DropDownContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);\n"], ["\n  position: relative;\n  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);\n"])));
-var DropDownHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fff;\n  padding: 8px 10px;\n  border-radius: 4px;\n  border: 1px solid #e4e7eb;\n  font-weight: 600;\n  color: var(--color-text-main);\n  background: var(--color-secondary-300);\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fff;\n  padding: 8px 10px;\n  border-radius: 4px;\n  border: 1px solid #e4e7eb;\n  font-weight: 600;\n  color: var(--color-text-main);\n  background: var(--color-secondary-300);\n"])));
+var DropDownHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fff;\n  padding: 8px 10px;\n  border-radius: 4px;\n  border: 1px solid #e4e7eb;\n  font-weight: 600;\n  color: var(--color-content);\n  background: var(--color-secondary-300);\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fff;\n  padding: 8px 10px;\n  border-radius: 4px;\n  border: 1px solid #e4e7eb;\n  font-weight: 600;\n  color: var(--color-content);\n  background: var(--color-secondary-300);\n"])));
 var DropDownList = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  background: var(--color-secondary-300);\n  margin: 2px 20px 0 20px;\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid rgba(38, 50, 56, 0.2);\n  z-index: 9999;\n  left: 0;\n  right: 0;\n"], ["\n  position: absolute;\n  background: var(--color-secondary-300);\n  margin: 2px 20px 0 20px;\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid rgba(38, 50, 56, 0.2);\n  z-index: 9999;\n  left: 0;\n  right: 0;\n"])));
 var IconWrapper = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  transition: transform 0.2s;\n  display: inline-block;\n  font-size: 0;\n  &.active {\n    transform: rotate(-180deg);\n  }\n"], ["\n  transition: transform 0.2s;\n  display: inline-block;\n  font-size: 0;\n  &.active {\n    transform: rotate(-180deg);\n  }\n"])));
-var ListItem = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: var(--background-color);\n  padding: 0.4em 10px;\n  font-size: 1em;\n  color: var(--color-text-main);\n  cursor: pointer;\n  &:hover {\n    background-color: rgba(38, 50, 56, 0.12);\n  }\n  &.active {\n    background-color: rgba(0, 0, 0, 0.05);\n  }\n"], ["\n  background-color: var(--background-color);\n  padding: 0.4em 10px;\n  font-size: 1em;\n  color: var(--color-text-main);\n  cursor: pointer;\n  &:hover {\n    background-color: rgba(38, 50, 56, 0.12);\n  }\n  &.active {\n    background-color: rgba(0, 0, 0, 0.05);\n  }\n"])));
-var DropDownLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: block;\n  text-decoration: none;\n  color: var(--color-text-main);\n"], ["\n  display: block;\n  text-decoration: none;\n  color: var(--color-text-main);\n"])));
+var ListItem = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: #fff;\n  padding: 0.4em 10px;\n  font-size: 1em;\n  color: var(--color-content);\n  cursor: pointer;\n  &:hover {\n    background-color: rgba(38, 50, 56, 0.12);\n  }\n  &.active {\n    background-color: rgba(0, 0, 0, 0.05);\n  }\n"], ["\n  background-color: #fff;\n  padding: 0.4em 10px;\n  font-size: 1em;\n  color: var(--color-content);\n  cursor: pointer;\n  &:hover {\n    background-color: rgba(38, 50, 56, 0.12);\n  }\n  &.active {\n    background-color: rgba(0, 0, 0, 0.05);\n  }\n"])));
+var DropDownLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: block;\n  text-decoration: none;\n  color: var(--color-content);\n"], ["\n  display: block;\n  text-decoration: none;\n  color: var(--color-content);\n"])));
 function Dropdown(_a) {
     var items = _a.items, activeItem = _a.activeItem;
     var ref = (0, react_1.useRef)(null);
@@ -50,5 +51,5 @@ function Dropdown(_a) {
     }, [isOpen]);
     return ((0, jsx_runtime_1.jsxs)(DropDownContainer, __assign({ ref: ref, "data-component-name": "ui/Dropdown" }, { children: [(0, jsx_runtime_1.jsxs)(DropDownHeader, __assign({ onClick: toggling }, { children: [(activeItem === null || activeItem === void 0 ? void 0 : activeItem.label) || activeItem.version, (0, jsx_runtime_1.jsx)(IconWrapper, __assign({ className: isOpen ? 'active' : '' }, { children: (0, jsx_runtime_1.jsx)(Icon, {}) }))] })), isOpen && ((0, jsx_runtime_1.jsx)(DropDownList, { children: items.map(function (item) { return ((0, jsx_runtime_1.jsx)(ListItem, __assign({ className: activeItem.version === item.version ? 'active' : '', onClick: toggling }, { children: (0, jsx_runtime_1.jsx)(DropDownLink, __assign({ to: (item === null || item === void 0 ? void 0 : item.link) || '#' }, { children: (item === null || item === void 0 ? void 0 : item.label) || item.version })) }), (item === null || item === void 0 ? void 0 : item.link) + (item === null || item === void 0 ? void 0 : item.version))); }) }))] })));
 }
-exports.default = Dropdown;
+exports.Dropdown = Dropdown;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Jumbotron.js

@@ -14,7 +14,7 @@ var Typography_1 = require("../ui/Typography");
 var Background_1 = require("../ui/Background");
 exports.Jumbotron = (0, styled_components_1.default)(Background_1.Background).attrs(function () { return ({
     'data-component-name': 'ui/Jumbotron',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: column;\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ", ", " {\n    color: ", ";\n    text-align: center;\n    padding: 0;\n  }\n  h1 {\n    font-size: 3.5em;\n    line-height: 1.2;\n    font-weight: var(--font-weight-bold);\n    margin: 1.75em 0 0.5em 0;\n  }\n  h2 {\n    font-size: 1.875em;\n    line-height: 1;\n    font-weight: var(--font-weight-light);\n    margin: 0;\n    margin-bottom: 2em;\n  }\n"], ["\n  flex-direction: column;\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ", ", " {\n    color: ", ";\n    text-align: center;\n    padding: 0;\n  }\n  h1 {\n    font-size: 3.5em;\n    line-height: 1.2;\n    font-weight: var(--font-weight-bold);\n    margin: 1.75em 0 0.5em 0;\n  }\n  h2 {\n    font-size: 1.875em;\n    line-height: 1;\n    font-weight: var(--font-weight-light);\n    margin: 0;\n    margin-bottom: 2em;\n  }\n"])), function (_a) {
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-direction: column;\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ", ", " {\n    color: ", ";\n    text-align: center;\n    padding: 0;\n  }\n  h1 {\n    font-size: 3.5em;\n    line-height: 1.2;\n    font-weight: var(--font-weight-bold);\n    margin: 1.75em 0 0.5em 0;\n  }\n  h2 {\n    font-size: 1.875em;\n    line-height: 1;\n    font-weight: var(--font-weight-regular);\n    margin: 0;\n    margin-bottom: 2em;\n  }\n"], ["\n  flex-direction: column;\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n  ", ", ", " {\n    color: ", ";\n    text-align: center;\n    padding: 0;\n  }\n  h1 {\n    font-size: 3.5em;\n    line-height: 1.2;\n    font-weight: var(--font-weight-bold);\n    margin: 1.75em 0 0.5em 0;\n  }\n  h2 {\n    font-size: 1.875em;\n    line-height: 1;\n    font-weight: var(--font-weight-regular);\n    margin: 0;\n    margin-bottom: 2em;\n  }\n"])), function (_a) {
     var pt = _a.pt;
     return pt || '0';
 }, function (_a) {
@@ -32,13 +32,13 @@ exports.Jumbotron = (0, styled_components_1.default)(Background_1.Background).at
 }, function (_a) {
     var bgImage = _a.bgImage, bgColor = _a.bgColor;
     return bgImage &&
-        "\n      background: ".concat(bgColor || 'var(--color-primary-main)', " url(").concat(bgImage, ");\n      background-repeat: no-repeat;\n      background-size: cover;\n      background-position: center;\n  ");
+        "\n      background: ".concat(bgColor || 'var(--color-content)', " url(").concat(bgImage, ");\n      background-repeat: no-repeat;\n      background-size: cover;\n      background-position: center;\n  ");
 }, function (_a) {
     var parallaxEffect = _a.parallaxEffect;
     return parallaxEffect &&
         "\n      background-attachment: scroll, fixed;\n  ";
 }, styled_system_1.space, Typography_1.H1, Typography_1.H2, function (_a) {
     var textColor = _a.textColor;
-    return textColor || 'var(--navbar-color-text)';
+    return textColor || 'var(--navbar-text-color)';
 });
 var templateObject_1;

package/ui/Tiles/TileHeader.js

@@ -11,5 +11,5 @@ exports.TileHeader = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.TileHeader = styled_components_1.default.h3.attrs(function () { return ({
     'data-component-name': 'ui/Tiles/TileHeader',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n  line-height: 1.25;\n  color: ", ";\n  font-family: var(--h-font-family);\n  && {\n    margin: 0 0 0.5em;\n  }\n"], ["\n  font-weight: var(--font-weight-bold);\n  line-height: 1.25;\n  color: ", ";\n  font-family: var(--h-font-family);\n  && {\n    margin: 0 0 0.5em;\n  }\n"])), function (props) { return props.color || 'var(--color-primary-main)'; });
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n  line-height: 1.25;\n  color: ", ";\n  font-family: var(--h-font-family);\n  && {\n    margin: 0 0 0.5em;\n  }\n"], ["\n  font-weight: var(--font-weight-bold);\n  line-height: 1.25;\n  color: ", ";\n  font-family: var(--h-font-family);\n  && {\n    margin: 0 0 0.5em;\n  }\n"])), function (props) { return props.color || 'var(--color-content)'; });
 var templateObject_1;

package/ui/Tiles/TileText.js

@@ -11,5 +11,5 @@ exports.TileText = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.TileText = styled_components_1.default.span.attrs(function () { return ({
     'data-component-name': 'ui/Tiles/TileText',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  font-weight: var(--font-weight-regular);\n  overflow: hidden;\n  color: ", ";\n  line-height: 1.25;\n  font-family: var(--font-family-primary);\n"], ["\n  display: inline-block;\n  font-weight: var(--font-weight-regular);\n  overflow: hidden;\n  color: ", ";\n  line-height: 1.25;\n  font-family: var(--font-family-primary);\n"])), function (props) { return props.color || 'var(--color-text-main)'; });
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  font-weight: var(--font-weight-regular);\n  overflow: hidden;\n  color: ", ";\n  line-height: 1.25;\n  font-family: var(--font-family-base);\n"], ["\n  display: inline-block;\n  font-weight: var(--font-weight-regular);\n  overflow: hidden;\n  color: ", ";\n  line-height: 1.25;\n  font-family: var(--font-family-base);\n"])), function (props) { return props.color || 'var(--color-content)'; });
 var templateObject_1;

package/ui/Tiles/index.d.ts

@@ -0,0 +1,4 @@
+export * from '../../ui/Tiles/ThinTile';
+export * from '../../ui/Tiles/TileHeader';
+export * from '../../ui/Tiles/TileText';
+export * from '../../ui/Tiles/WideTile';

package/ui/Tiles/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../ui/Tiles/ThinTile"), exports);
+__exportStar(require("../../ui/Tiles/TileHeader"), exports);
+__exportStar(require("../../ui/Tiles/TileText"), exports);
+__exportStar(require("../../ui/Tiles/WideTile"), exports);