@redocly/theme 0.1.9 → 0.1.12

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,7 +81,7 @@ const ListItem = styled.div`
 const DropDownLink = styled(Link)`
   display: block;
   text-decoration: none;
-  color: var(--color-text-main);
+  color: var(--color-content);
 `;
 
 export function Dropdown({ items, activeItem }: DropdownProps): JSX.Element {

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

@@ -1,4 +1,4 @@
-export * from './ThinTile';
-export * from './TileHeader';
-export * from './TileText';
-export * from './WideTile';
+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)',
-    fontWeight: 'var(--font-weight-bold)',
+    fontFamily: 'var(--h-font-family)',
+    fontWeight: 'var(--h1-font-weight, var(--h-font-weight))',
     lineHeight: 'var(--h1-line-height)',
-    color: 'var(--color-text-main)',
+    color: 'var(--h-color)',
     marginTop: 'var(--h1-margin-top)',
     marginBottom: 'var(--h1-margin-bottom)',
   },
   heading2: {
     fontSize: 'var(--h2-font-size)',
-    fontFamily: 'var(--font-family-h)',
-    fontWeight: 'var(--font-weight-bold)',
+    fontFamily: 'var(--h-font-family)',
+    fontWeight: 'var(--h2-font-weight, var(--h-font-weight))',
     lineHeight: 'var(--h2-line-height)',
-    color: 'var(--color-text-main)',
+    color: 'var(--h-color)',
     marginTop: 'var(--h2-margin-top)',
     marginBottom: 'var(--h2-margin-bottom)',
   },
   heading3: {
     fontSize: 'var(--h3-font-size)',
-    fontFamily: 'var(--font-family-h)',
-    fontWeight: 'var(--font-weight-bold)',
+    fontFamily: 'var(--h-font-family)',
+    fontWeight: 'var(--h3-font-weight, var(--h-font-weight))',
     lineHeight: 'var(--h3-line-height)',
-    color: 'var(--color-text-main)',
+    color: 'var(--h-color)',
     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);
+  padding: 0 20px;
+  font-family: var(--h-font-family);
 `;
 
 export const Typography = styled.p.attrs(() => ({
@@ -153,8 +153,8 @@ export const Typography = styled.p.attrs(() => ({
   }
 >`
   ${typography(typographyTokens.typography)};
-  color: var(--color-text-main);
-  ${color}
+  color: var(--color-content);
+  ${color};
   margin-top: ${({ mt }) => mt || '1em'};
   margin-bottom: ${({ mb }) => mb || '1em'};
   ${typographySystem}

package/src/ui/UniversalLink.tsx

@@ -3,7 +3,6 @@ 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 { Link } from '@portal/Link';
 
 const StyledExternalLink = styled.a`
@@ -14,15 +13,11 @@ const StyledExternalLink = styled.a`
       content: '';
       display: inline-block;
       position: absolute;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath fill='${({
-        theme,
-      }) =>
-        replaceHashInColor(
-          theme.colors.text.primary,
-        )}' d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E");
+      background: var(--color-content);
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0' y='0' viewBox='0 0 100 125' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath d='M-408.2-318.5 98.6 4.8c0-0.1 0-0.2-0.1-0.3 0-0.1-0.1-0.2-0.1-0.3 0-0.1 0-0.1-0.1-0.2 0 0 0-0.1 0-0.1 0-0.1-0.1-0.2-0.2-0.3 0-0.1-0.1-0.2-0.2-0.3 -0.1-0.1-0.1-0.2-0.2-0.3C97.7 2.9 97.6 2.8 97.5 2.7c-0.1-0.1-0.2-0.2-0.3-0.3 -0.1-0.1-0.1-0.1-0.2-0.2 -0.1-0.1-0.2-0.2-0.3-0.2 -0.1-0.1-0.2-0.1-0.2-0.2 -0.1-0.1-0.2-0.1-0.3-0.2 -0.1 0-0.2-0.1-0.3-0.1 0 0-0.1 0-0.1-0.1 -0.1 0-0.2 0-0.2-0.1 -0.1 0-0.2-0.1-0.3-0.1 -0.1 0-0.2-0.1-0.4-0.1 -0.1 0-0.2 0-0.3 0 -0.1 0-0.3 0-0.4 0 -0.1 0-0.1 0-0.2 0L63.8 1.3c-2.5 0-4.6 2.1-4.6 4.6 0 2.5 2.1 4.6 4.6 4.5l19.3-0.1 -29.8 30.2c-1.1 1.1-1.5 2.7-1.2 4.1 0.2 0.9 0.6 1.7 1.3 2.4 0.9 0.9 2.1 1.3 3.2 1.3 1.2 0 2.3-0.5 3.2-1.4l0 0 29.8-30.2 0.1 19.3c0 2.5 2.1 4.6 4.6 4.5 1.3 0 2.4-0.5 3.2-1.4 0.8-0.8 1.3-2 1.3-3.2L98.7 5.7c0-0.1 0-0.1 0-0.2 0-0.1 0-0.2 0-0.4C98.6 5 98.6 4.9 98.6 4.8zM6.5 83.3c0 5.7 4.6 10.4 10.4 10.4l55.6 0.1c5.7 0 10.4-4.6 10.4-10.4l-0.1-40.8h6.1v40.8c0 9-7.3 16.3-16.3 16.3l-56.4-0.1c-8.6 0-15.6-7-15.6-15.6L0.6 27.8c0-9 7.3-16.3 16.3-16.3l41.1-0.1v6.1L17 17.5c-5.7 0-10.4 4.6-10.4 10.4L6.5 83.3z'/%3E%3C/svg%3E");
+      mask-repeat: no-repeat;
       width: 10px;
       height: 10px;
-      background-repeat: no-repeat;
       top: 50%;
       right: -15px;
       transform: translateY(-50%);

package/src/utils/isUrl.ts

@@ -12,16 +12,16 @@ const nonLocalhostDomainRE = /^[^\s.]+\.\S{2,}$/;
 /**
  * Loosely validate a URL `string`.
  *
- * @param {String} string
+ * @param {String} input
  * @return {Boolean}
  */
 
-export function isUrl(string: string): boolean {
-  if (typeof string !== 'string') {
+export function isUrl(input: unknown): boolean {
+  if (typeof input !== 'string') {
     return false;
   }
 
-  const match = string.match(protocolAndDomainRE);
+  const match = input.match(protocolAndDomainRE);
   if (!match) {
     return false;
   }

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.js

@@ -25,11 +25,11 @@ 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);

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

@@ -1,4 +1,4 @@
-export * from './ThinTile';
-export * from './TileHeader';
-export * from './TileText';
-export * from './WideTile';
+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

@@ -14,7 +14,7 @@ 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("./ThinTile"), exports);
-__exportStar(require("./TileHeader"), exports);
-__exportStar(require("./TileText"), exports);
-__exportStar(require("./WideTile"), exports);
+__exportStar(require("../../ui/Tiles/ThinTile"), exports);
+__exportStar(require("../../ui/Tiles/TileHeader"), exports);
+__exportStar(require("../../ui/Tiles/TileText"), exports);
+__exportStar(require("../../ui/Tiles/WideTile"), exports);