@redocly/theme 0.2.2 → 0.4.0

package/src/hooks/useActiveHeading.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
 export type UseActiveHeadingReturnType = string | undefined;
@@ -31,47 +31,53 @@ export function useActiveHeading(
     return visibleHeadings;
   };
 
-  const getIndexFromId = (id: string) => {
-    return headingElements.findIndex((item) => item.id === id);
-  };
+  const getIndexFromId = useCallback(
+    (id: string) => {
+      return headingElements.findIndex((item) => item.id === id);
+    },
+    [headingElements],
+  );
 
   const findHeaders = (allContent: HTMLDivElement) => {
     const allHeaders = allContent.querySelectorAll<HTMLElement>('.heading-anchor');
     return Array.from(allHeaders);
   };
 
-  const intersectionCallback = (headings: IntersectionObserverEntry[]) => {
-    headingElementsRef.current = headings.reduce(
-      (map: HeadingEntry, headingElement: IntersectionObserverEntry) => {
-        map[headingElement.target.id] = headingElement;
-        return map;
-      },
-      headingElementsRef.current,
-    );
-
-    const totalHeight = window.scrollY + window.innerHeight;
-    // handle bottom of the page
-    if (totalHeight >= document.body.scrollHeight) {
-      const newHeading = headingElements[headingElements?.length - 1]?.id || undefined;
-      setHeading(newHeading);
-      return;
-    }
+  const intersectionCallback = useCallback(
+    (headings: IntersectionObserverEntry[]) => {
+      headingElementsRef.current = headings.reduce(
+        (map: HeadingEntry, headingElement: IntersectionObserverEntry) => {
+          map[headingElement.target.id] = headingElement;
+          return map;
+        },
+        headingElementsRef.current,
+      );
+
+      const totalHeight = window.scrollY + window.innerHeight;
+      // handle bottom of the page
+      if (totalHeight >= document.body.scrollHeight) {
+        const newHeading = headingElements[headingElements?.length - 1]?.id || undefined;
+        setHeading(newHeading);
+        return;
+      }
 
-    const visibleHeadings = getVisibleHeadings();
-    if (!visibleHeadings.length) {
-      return;
-    }
+      const visibleHeadings = getVisibleHeadings();
+      if (!visibleHeadings.length) {
+        return;
+      }
 
-    if (visibleHeadings.length === 1) {
-      setHeading(visibleHeadings[0].target.id);
-      return;
-    }
+      if (visibleHeadings.length === 1) {
+        setHeading(visibleHeadings[0].target.id);
+        return;
+      }
 
-    visibleHeadings.sort((a, b) => {
-      return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
-    });
-    setHeading(visibleHeadings[0].target.id);
-  };
+      visibleHeadings.sort((a, b) => {
+        return getIndexFromId(a.target.id) - getIndexFromId(b.target.id);
+      });
+      setHeading(visibleHeadings[0].target.id);
+    },
+    [getIndexFromId, headingElements],
+  );
 
   useEffect(() => {
     if (!contentElement) {
@@ -84,6 +90,7 @@ export function useActiveHeading(
     });
 
     return () => unlisten();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [contentElement]);
 
   useEffect(() => {
@@ -104,7 +111,7 @@ export function useActiveHeading(
     });
 
     return () => observer.disconnect();
-  }, [headingElements, displayedHeaders]);
+  }, [headingElements, displayedHeaders, intersectionCallback]);
 
   return heading;
 }

package/src/icons/ArrowIcon/ArrowIcon.tsx

@@ -27,9 +27,9 @@ const Icon = ({ className }: { className?: string }) => (
 );
 
 export const ArrowIcon = styled(Icon)`
-  width: var(--sidebar-chevron-size);
-  height: var(--sidebar-chevron-size);
-  fill: var(--sidebar-chevron-color);
+  width: var(--sidebar-group-item-chevron-size);
+  height: var(--sidebar-group-item-chevron-size);
+  fill: var(--sidebar-group-item-chevron-color);
   transform: rotate(${directionToTransform}deg);
 
   vertical-align: middle;

package/src/icons/ColorModeIcon/ColorModeIcon.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ColorModeIconProps {
+  mode?: 'dark' | 'light' | string;
+  className?: string;
+}
+
+function Icon({ mode, className }: ColorModeIconProps) {
+  switch (mode) {
+    case 'dark':
+      return (
+        <svg
+          className={className}
+          data-testid="dark"
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
+        </svg>
+      );
+    case 'light':
+      return (
+        <svg
+          data-testid="light"
+          className={className}
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
+        </svg>
+      );
+    default:
+      return (
+        <svg
+          data-testid="custom"
+          className={className}
+          viewBox="0 0 16 16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 13V2a6 6 0 1 1 0 12z" />
+        </svg>
+      );
+  }
+}
+
+export const ColorModeIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ColorModeIcon/ColorModeIcon',
+}))`
+  width: var(--navbar-item-font-size);
+  box-sizing: border-box;
+  fill: var(--navbar-text-color);
+`;

package/src/icons/ColorModeIcon/index.ts

@@ -0,0 +1,2 @@
+export { ColorModeIcon } from '@theme/icons/ColorModeIcon/ColorModeIcon';
+export type { ColorModeIconProps } from '@theme/icons/ColorModeIcon/ColorModeIcon';

package/src/icons/index.ts

@@ -1,3 +1,4 @@
 export * from '@theme/icons/ShelfIcon';
 export * from '@theme/icons/AlertIcon';
 export * from '@theme/icons/ArrowIcon';
+export * from '@theme/icons/ColorModeIcon';

package/src/index.ts

@@ -15,3 +15,4 @@ export * from './globalStyle';
 export * from './OperationBadge';
 export * from './TableOfContent';
 export * from './Profile';
+export * from './ColorModeSwitcher';

package/src/mocks/hooks/index.ts

@@ -16,6 +16,10 @@ export function useThemeSettings(_: string): RawTheme['settings'] {
       nextPageLink: { label: 'next page theme settings label' },
       previousPageLink: { label: 'prev page theme settings label' },
     },
+    colorMode: {
+      modes: ['light', 'dark'],
+      default: 'light',
+    },
   };
 }
 

package/src/settings.yaml

@@ -17,3 +17,9 @@ sidebar:
   hide: false
 footer:
   hide: false
+colorMode:
+  hide: false
+  detect: true
+  modes:
+    - 'light'
+    - 'dark'

package/src/ui/Background.tsx

@@ -7,7 +7,7 @@ export const Background = styled(Flex).attrs(() => ({
 }))`
   background: var(--navbar-background-color);
   color: var(--navbar-text-color);
-  font-family: var(--h-font-family);
+  font-family: var(--heading-font-family);
 
   a:not([role='button']),
   a:not([role='button']):hover {

package/src/ui/Dropdown.tsx

@@ -21,7 +21,7 @@ const Icon = () => (
     strokeLinecap="round"
     strokeLinejoin="round"
   >
-    <polyline points="6 9 12 15 18 9"></polyline>
+    <polyline points="6 9 12 15 18 9" />
   </svg>
 );
 
@@ -39,13 +39,13 @@ const DropDownHeader = styled.div`
   border-radius: 4px;
   border: 1px solid #e4e7eb;
   font-weight: 600;
-  color: var(--color-content);
-  background: var(--color-secondary-300);
+  color: var(--text-color);
+  background: var(--color-secondary-200);
 `;
 
 const DropDownList = styled.div`
   position: absolute;
-  background: var(--color-secondary-300);
+  background: var(--color-secondary-200);
   margin: 2px 20px 0 20px;
   padding: 0;
   border-radius: 4px;
@@ -68,7 +68,7 @@ const ListItem = styled.div`
   background-color: #fff;
   padding: 0.4em 10px;
   font-size: 1em;
-  color: var(--color-content);
+  color: var(--text-color);
   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-content);
+  color: var(--text-color);
 `;
 
 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-content)'} url(${bgImage});
+      background: ${bgColor || 'var(--text-color)'} url(${bgImage});
       background-repeat: no-repeat;
       background-size: cover;
       background-position: center;

package/src/ui/Tiles/TileHeader.ts

@@ -3,11 +3,11 @@ import styled from 'styled-components';
 export const TileHeader = styled.h3.attrs(() => ({
   'data-component-name': 'ui/Tiles/TileHeader',
 }))<{ color?: string }>`
-  font-weight: var(--font-weight-bold);
-  line-height: 1.25;
-  color: ${(props) => props.color || 'var(--color-content)'};
-  font-family: var(--h-font-family);
+  font-weight: var(--h3-font-weight);
+  line-height: var(--h3-line-height);
+  color: ${(props) => props.color || 'var(--h3-color)'};
+  font-family: var(--h3-font-family);
   && {
-    margin: 0 0 0.5em;
+    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
   }
 `;

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-content)'};
+  color: ${(props) => props.color || 'var(--text-color)'};
   line-height: 1.25;
   font-family: var(--font-family-base);
 `;

package/src/ui/UniversalLink.tsx

@@ -13,7 +13,7 @@ const StyledExternalLink = styled.a`
       content: '';
       display: inline-block;
       position: absolute;
-      background: var(--color-content);
+      background: var(--text-color);
       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;

package/src/utils/theme-helpers.ts

@@ -38,7 +38,7 @@ const typographyProperties = Object.entries({
   fontWeight: 'font-weight',
   fontFamily: 'font-family',
   lineHeight: 'line-height',
-  color: 'color',
+  color: 'text-color',
   textTransform: 'text-transform',
 });
 

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-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"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: var(--navbar-background-color);\n  color: var(--navbar-text-color);\n  font-family: var(--heading-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(--heading-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

@@ -53,11 +53,11 @@ var Link_1 = require("../mocks/Link");
 var Icon = function () { return (react_1.default.createElement("svg", { 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" },
     react_1.default.createElement("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-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 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(--text-color);\n  background: var(--color-secondary-200);\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(--text-color);\n  background: var(--color-secondary-200);\n"])));
+var DropDownList = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  background: var(--color-secondary-200);\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-200);\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: #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"])));
+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(--text-color);\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(--text-color);\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(--text-color);\n"], ["\n  display: block;\n  text-decoration: none;\n  color: var(--text-color);\n"])));
 function Dropdown(_a) {
     var items = _a.items, activeItem = _a.activeItem;
     var ref = (0, react_1.useRef)(null);

package/ui/Jumbotron.js

@@ -32,7 +32,7 @@ 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-content)', " url(").concat(bgImage, ");\n      background-repeat: no-repeat;\n      background-size: cover;\n      background-position: center;\n  ");
+        "\n      background: ".concat(bgColor || 'var(--text-color)', " 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 &&

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-content)'; });
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: var(--h3-font-weight);\n  line-height: var(--h3-line-height);\n  color: ", ";\n  font-family: var(--h3-font-family);\n  && {\n    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);\n  }\n"], ["\n  font-weight: var(--h3-font-weight);\n  line-height: var(--h3-line-height);\n  color: ", ";\n  font-family: var(--h3-font-family);\n  && {\n    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);\n  }\n"])), function (props) { return props.color || 'var(--h3-color)'; });
 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-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)'; });
+}); })(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(--text-color)'; });
 var templateObject_1;

package/ui/UniversalLink.js

@@ -63,7 +63,7 @@ var react_router_dom_1 = require("react-router-dom");
 var styled_components_1 = __importDefault(require("styled-components"));
 var isUrl_1 = require("../utils/isUrl");
 var Link_1 = require("../mocks/Link");
-var StyledExternalLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.external-url {\n    position: relative;\n\n    :after {\n      content: '';\n      display: inline-block;\n      position: absolute;\n      background: var(--color-content);\n      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\");\n      mask-repeat: no-repeat;\n      width: 10px;\n      height: 10px;\n      top: 50%;\n      right: -15px;\n      transform: translateY(-50%);\n    }\n  }\n"], ["\n  &.external-url {\n    position: relative;\n\n    :after {\n      content: '';\n      display: inline-block;\n      position: absolute;\n      background: var(--color-content);\n      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\");\n      mask-repeat: no-repeat;\n      width: 10px;\n      height: 10px;\n      top: 50%;\n      right: -15px;\n      transform: translateY(-50%);\n    }\n  }\n"])));
+var StyledExternalLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.external-url {\n    position: relative;\n\n    :after {\n      content: '';\n      display: inline-block;\n      position: absolute;\n      background: var(--text-color);\n      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\");\n      mask-repeat: no-repeat;\n      width: 10px;\n      height: 10px;\n      top: 50%;\n      right: -15px;\n      transform: translateY(-50%);\n    }\n  }\n"], ["\n  &.external-url {\n    position: relative;\n\n    :after {\n      content: '';\n      display: inline-block;\n      position: absolute;\n      background: var(--text-color);\n      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\");\n      mask-repeat: no-repeat;\n      width: 10px;\n      height: 10px;\n      top: 50%;\n      right: -15px;\n      transform: translateY(-50%);\n    }\n  }\n"])));
 // TODO: We're using our own Link component so probably filtering is not necessary here.
 // filter out unnecessary props
 var propsList = [

package/utils/theme-helpers.js

@@ -70,7 +70,7 @@ var typographyProperties = Object.entries({
     fontWeight: 'font-weight',
     fontFamily: 'font-family',
     lineHeight: 'line-height',
-    color: 'color',
+    color: 'text-color',
     textTransform: 'text-transform',
 });
 function getTypographyCssRulesByComponentName(componentName, fallbackName) {

package/Markdown/ContentWrapper.d.ts

@@ -1,5 +0,0 @@
-export declare const ContentWrapper: import("styled-components").StyledComponent<"section", any, {
-    'data-component-name': string;
-} & {
-    withToc: boolean;
-}, "data-component-name">;

package/Markdown/ContentWrapper.js

@@ -1,21 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentWrapper = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-exports.ContentWrapper = styled_components_1.default.section.attrs(function () { return ({
-    'data-component-name': 'Markdown/ContentWrapper',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: var(--content-wrapper-max-width);\n  width: 90%;\n  margin: 0 auto;\n\n  padding: var(--content-wrapper-padding-vertical) var(--content-wrapper-padding-horizontal);\n\n  & > article:first-child > h1:first-child {\n    // disable margin top for h1 on the title heading if there is no \"Last updated at\" block\n    /* margin-top: 0; */\n  }\n\n  ", " {\n    width: ", ";\n  }\n"], ["\n  max-width: var(--content-wrapper-max-width);\n  width: 90%;\n  margin: 0 auto;\n\n  padding: var(--content-wrapper-padding-vertical) var(--content-wrapper-padding-horizontal);\n\n  & > article:first-child > h1:first-child {\n    // disable margin top for h1 on the title heading if there is no \"Last updated at\" block\n    /* margin-top: 0; */\n  }\n\n  ", " {\n    width: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.mediaQueries.medium;
-}, function (_a) {
-    var withToc = _a.withToc;
-    return (withToc ? "calc(90% - var(--toc-width))" : '90%');
-});
-var templateObject_1;

package/Panel/CodePanel.d.ts

@@ -1,5 +0,0 @@
-export declare const CodePanel: import("styled-components").StyledComponent<typeof import("./PanelComponent").PanelComponent, any, {
-    'data-component-name': string;
-} & {
-    'data-component-name': string;
-}, "data-component-name">;

package/Panel/CodePanel.js

@@ -1,21 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CodePanel = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var ShelfIcon_1 = require("../icons/ShelfIcon");
-var Panel_1 = require("../Panel/Panel");
-var PanelHeader_1 = require("../Panel/PanelHeader");
-var DarkHeader_1 = require("../Panel/DarkHeader");
-var PanelBody_1 = require("../Panel/PanelBody");
-var PanelHeaderTitle_1 = require("../Panel/PanelHeaderTitle");
-exports.CodePanel = (0, styled_components_1.default)(Panel_1.Panel).attrs(function () { return ({
-    'data-component-name': 'Panel/CodePanel',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > ", " {\n    ", ";\n    min-height: 50px;\n\n    ", " {\n      fill: var(--color-content-inverse);\n      position: relative;\n    }\n\n    ", " {\n      color: var(--color-content-inverse);\n    }\n  }\n\n  && {\n    ", " {\n      padding: 10px 20px 20px;\n      background-color: var(--samples-panel-background-color);\n      color: var(--color-content-inverse);\n    }\n  }\n"], ["\n  > ", " {\n    ", ";\n    min-height: 50px;\n\n    ", " {\n      fill: var(--color-content-inverse);\n      position: relative;\n    }\n\n    ", " {\n      color: var(--color-content-inverse);\n    }\n  }\n\n  && {\n    ", " {\n      padding: 10px 20px 20px;\n      background-color: var(--samples-panel-background-color);\n      color: var(--color-content-inverse);\n    }\n  }\n"])), PanelHeader_1.PanelHeader, DarkHeader_1.DarkHeader, ShelfIcon_1.ShelfIcon, PanelHeaderTitle_1.PanelHeaderTitle, PanelBody_1.PanelBody);
-var templateObject_1;

package/Panel/ContentPanel.d.ts

@@ -1,5 +0,0 @@
-export declare const ContentPanel: import("styled-components").StyledComponent<typeof import("./PanelComponent").PanelComponent, any, {
-    'data-component-name': string;
-} & {
-    'data-component-name': string;
-}, "data-component-name">;

package/Panel/ContentPanel.js

@@ -1,20 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentPanel = void 0;
-var styled_components_1 = __importDefault(require("styled-components"));
-var ShelfIcon_1 = require("../icons/ShelfIcon");
-var PanelHeaderTitle_1 = require("../Panel/PanelHeaderTitle");
-var Panel_1 = require("../Panel/Panel");
-var PanelBody_1 = require("../Panel/PanelBody");
-var PanelHeader_1 = require("../Panel/PanelHeader");
-exports.ContentPanel = (0, styled_components_1.default)(Panel_1.Panel).attrs(function () { return ({
-    'data-component-name': 'Panel/ContentPanel',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid var(--global-border-color);\n\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-base);\n\n  &:not(:last-child) {\n    margin-bottom: 20px;\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n    font-size: 18px;\n    font-weight: var(--font-weight-bold);\n    background-color: var(--panels-background-color);\n\n    ", " {\n      color: var(--color-content);\n    }\n\n    ", " {\n      fill: var(--color-content);\n    }\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n  }\n\n  > ", " + ", " {\n    padding-top: 1px; /* to prevent border overflow */\n  }\n"], ["\n  border: 1px solid var(--global-border-color);\n\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-base);\n\n  &:not(:last-child) {\n    margin-bottom: 20px;\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n    font-size: 18px;\n    font-weight: var(--font-weight-bold);\n    background-color: var(--panels-background-color);\n\n    ", " {\n      color: var(--color-content);\n    }\n\n    ", " {\n      fill: var(--color-content);\n    }\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n  }\n\n  > ", " + ", " {\n    padding-top: 1px; /* to prevent border overflow */\n  }\n"])), PanelHeader_1.PanelHeader, PanelHeaderTitle_1.PanelHeaderTitle, ShelfIcon_1.ShelfIcon, PanelBody_1.PanelBody, PanelHeader_1.PanelHeader, PanelBody_1.PanelBody);
-var templateObject_1;

package/Panel/DarkHeader.d.ts

@@ -1 +0,0 @@
-export declare const DarkHeader: import("styled-components").FlattenSimpleInterpolation;

package/Panel/DarkHeader.js

@@ -1,10 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DarkHeader = void 0;
-var styled_components_1 = require("styled-components");
-exports.DarkHeader = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 10px 20px;\n  line-height: 30px;\n  z-index: 0;\n  background-color: var(--samples-panel-controls-background-color);\n"], ["\n  padding: 10px 20px;\n  line-height: 30px;\n  z-index: 0;\n  background-color: var(--samples-panel-controls-background-color);\n"])));
-var templateObject_1;

package/src/Panel/CodePanel.ts

@@ -1,34 +0,0 @@
-import styled from 'styled-components';
-
-import { ShelfIcon } from '@theme/icons/ShelfIcon';
-import { Panel } from '@theme/Panel/Panel';
-import { PanelHeader } from '@theme/Panel/PanelHeader';
-import { DarkHeader } from '@theme/Panel/DarkHeader';
-import { PanelBody } from '@theme/Panel/PanelBody';
-import { PanelHeaderTitle } from '@theme/Panel/PanelHeaderTitle';
-
-export const CodePanel = styled(Panel).attrs(() => ({
-  'data-component-name': 'Panel/CodePanel',
-}))`
-  > ${PanelHeader} {
-    ${DarkHeader};
-    min-height: 50px;
-
-    ${ShelfIcon} {
-      fill: var(--color-content-inverse);
-      position: relative;
-    }
-
-    ${PanelHeaderTitle} {
-      color: var(--color-content-inverse);
-    }
-  }
-
-  && {
-    ${PanelBody} {
-      padding: 10px 20px 20px;
-      background-color: var(--samples-panel-background-color);
-      color: var(--color-content-inverse);
-    }
-  }
-`;

package/src/Panel/ContentPanel.ts

@@ -1,44 +0,0 @@
-import styled from 'styled-components';
-
-import { ShelfIcon } from '@theme/icons/ShelfIcon';
-import { PanelHeaderTitle } from '@theme/Panel/PanelHeaderTitle';
-import { Panel } from '@theme/Panel/Panel';
-import { PanelBody } from '@theme/Panel/PanelBody';
-import { PanelHeader } from '@theme/Panel/PanelHeader';
-
-export const ContentPanel = styled(Panel).attrs(() => ({
-  'data-component-name': 'Panel/ContentPanel',
-}))`
-  border: 1px solid var(--global-border-color);
-
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-base);
-
-  &:not(:last-child) {
-    margin-bottom: 20px;
-  }
-
-  > ${PanelHeader} {
-    padding: calc(var(--spacing-unit) * 4);
-    font-size: 18px;
-    font-weight: var(--font-weight-bold);
-    background-color: var(--panels-background-color);
-
-    ${PanelHeaderTitle} {
-      color: var(--color-content);
-    }
-
-    ${ShelfIcon} {
-      fill: var(--color-content);
-    }
-  }
-
-  > ${PanelBody} {
-    padding: calc(var(--spacing-unit) * 4);
-  }
-
-  > ${PanelHeader} + ${PanelBody} {
-    padding-top: 1px; /* to prevent border overflow */
-  }
-`;

package/src/Panel/DarkHeader.ts

@@ -1,8 +0,0 @@
-import { css } from 'styled-components';
-
-export const DarkHeader = css`
-  padding: 10px 20px;
-  line-height: 30px;
-  z-index: 0;
-  background-color: var(--samples-panel-controls-background-color);
-`;