@redocly/theme 0.1.24 → 0.1.27

package/Cards/Card.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ResolvedNavItem } from '@theme/types/portal';
+export interface CardProps {
+    title?: string;
+    icon?: string;
+    links: ResolvedNavItem;
+}
+export declare function Card(props: CardProps): JSX.Element;

package/Cards/Card.js

@@ -0,0 +1,25 @@
+"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.Card = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Link_1 = require("../mocks/Link");
+var Typography_1 = require("../Typography");
+function Card(props) {
+    return (react_1.default.createElement(CardWrapper, { "data-component-name": "Cards/Card" },
+        props.icon && react_1.default.createElement("img", { src: props === null || props === void 0 ? void 0 : props.icon, alt: props === null || props === void 0 ? void 0 : props.title }),
+        props.title && react_1.default.createElement(Typography_1.H3, null, props.title),
+        props.links.items && (react_1.default.createElement(CardLinksList, null, props.links.items.map(function (item) { return (react_1.default.createElement("li", { key: item.label },
+            react_1.default.createElement(Link_1.Link, { to: item.link }, item.label))); })))));
+}
+exports.Card = Card;
+var CardWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 10px;\n  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);\n  padding: 20px;\n  margin: 0 20px 20px 0;\n  min-width: 25%;\n  font-family: var(--font-family-base);\n"], ["\n  border-radius: 10px;\n  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);\n  padding: 20px;\n  margin: 0 20px 20px 0;\n  min-width: 25%;\n  font-family: var(--font-family-base);\n"])));
+var CardLinksList = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n\n  li {\n    margin-bottom: 10px;\n  }\n"], ["\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n\n  li {\n    margin-bottom: 10px;\n  }\n"])));
+var templateObject_1, templateObject_2;

package/Cards/CardsBlock.d.ts

@@ -0,0 +1,3 @@
+export declare const CardsBlock: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Cards/CardsBlock.js

@@ -0,0 +1,15 @@
+"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.CardsBlock = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.CardsBlock = styled_components_1.default.div.attrs(function () { return ({
+    'data-component-name': 'Cards/CardsBlock',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  padding: 20px 0;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  padding: 20px 0;\n  justify-content: space-between;\n"])));
+var templateObject_1;

package/Footer/Footer.js

@@ -16,7 +16,7 @@ var hooks_1 = require("../mocks/hooks");
 var constants_1 = require("../mocks/constants");
 function Footer(_a) {
     var _b = _a.data, columns = _b.columns, copyrightText = _b.copyrightText;
-    var footer = (0, hooks_1.useThemeSettings)(constants_1.USER_THEME_ALIAS).footer;
+    var footer = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).footer;
     if (!((columns === null || columns === void 0 ? void 0 : columns.length) || copyrightText) || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
         return null;
     }

package/Markdown/Heading.js

@@ -25,12 +25,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = void 0;
 var react_1 = __importStar(require("react"));
+var utils_1 = require("../utils");
+/**
+ * Class name for all MD tags
+ */
+var mdClassName = 'md';
 var SvgIcon = (react_1.default.createElement("svg", { "aria-hidden": "true", focusable: "false", height: "16", version: "1.1", viewBox: "0 0 16 16", width: "16" },
     react_1.default.createElement("path", { fillRule: "evenodd", d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" })));
 function Heading(_a) {
     var level = _a.level, id = _a.id, children = _a.children;
-    var linkEl = (react_1.default.createElement("a", { href: "#".concat(id), className: "anchor before" }, SvgIcon));
-    return (0, react_1.createElement)("h".concat(level), { id: id, className: 'heading-anchor', 'data-component-name': 'Markdown/Heading/Heading' }, react_1.default.createElement(react_1.default.Fragment, null,
+    var linkEl = (react_1.default.createElement("a", { href: "#".concat(id), className: (0, utils_1.concatClassNames)('anchor', 'before') }, SvgIcon));
+    return (0, react_1.createElement)("h".concat(level), {
+        id: id,
+        className: (0, utils_1.concatClassNames)('heading-anchor', mdClassName),
+        'data-component-name': 'Markdown/Heading/Heading',
+    }, react_1.default.createElement(react_1.default.Fragment, null,
         linkEl,
         children));
 }

package/Markdown/MarkdownWrapper.js

@@ -30,7 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownWrapper = exports.headingAnchor = exports.baseTable = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var utils_1 = require("../utils");
-exports.baseTable = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  table {\n    display: block;\n    width: 100%;\n    overflow: auto;\n    word-break: keep-all;\n    border-collapse: separate;\n    border-spacing: 0;\n    margin-top: 20px;\n    margin-bottom: 20px;\n    font-size: 14px;\n  }\n\n  table th,\n  table td {\n    padding: 12px;\n    border-bottom: 1px solid var(--global-border-color);\n  }\n\n  table th {\n    text-align: left;\n    font-weight: bold;\n    background-color: var(--color-secondary-300);\n  }\n\n  table tr th:first-child,\n  table tr td:first-child {\n    border-left: 1px solid var(--global-border-color);\n  }\n\n  table tr td:last-child,\n  table tr th:last-child {\n    border-right: 1px solid var(--global-border-color);\n  }\n\n  table thead td,\n  table thead th {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  /* top-left border */\n\n  table thead tr:first-child th:first-child {\n    border-top-left-radius: var(--panels-border-radius);\n  }\n\n  /* top-right border */\n\n  table thead tr:first-child th:last-child {\n    border-top-right-radius: var(--panels-border-radius);\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  /* bottom-left border */\n\n  table tbody tr:last-child td:first-child {\n    border-bottom-left-radius: var(--panels-border-radius);\n  }\n\n  /* bottom-right border */\n\n  table tbody tr:last-child td:last-child {\n    border-bottom-right-radius: var(--panels-border-radius);\n  }\n"], ["\n  table {\n    display: block;\n    width: 100%;\n    overflow: auto;\n    word-break: keep-all;\n    border-collapse: separate;\n    border-spacing: 0;\n    margin-top: 20px;\n    margin-bottom: 20px;\n    font-size: 14px;\n  }\n\n  table th,\n  table td {\n    padding: 12px;\n    border-bottom: 1px solid var(--global-border-color);\n  }\n\n  table th {\n    text-align: left;\n    font-weight: bold;\n    background-color: var(--color-secondary-300);\n  }\n\n  table tr th:first-child,\n  table tr td:first-child {\n    border-left: 1px solid var(--global-border-color);\n  }\n\n  table tr td:last-child,\n  table tr th:last-child {\n    border-right: 1px solid var(--global-border-color);\n  }\n\n  table thead td,\n  table thead th {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  /* top-left border */\n\n  table thead tr:first-child th:first-child {\n    border-top-left-radius: var(--panels-border-radius);\n  }\n\n  /* top-right border */\n\n  table thead tr:first-child th:last-child {\n    border-top-right-radius: var(--panels-border-radius);\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  /* bottom-left border */\n\n  table tbody tr:last-child td:first-child {\n    border-bottom-left-radius: var(--panels-border-radius);\n  }\n\n  /* bottom-right border */\n\n  table tbody tr:last-child td:last-child {\n    border-bottom-right-radius: var(--panels-border-radius);\n  }\n"])));
+exports.baseTable = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  table.md {\n    display: block;\n    width: 100%;\n    overflow: auto;\n    word-break: keep-all;\n    border-collapse: separate;\n    border-spacing: 0;\n    margin-top: 20px;\n    margin-bottom: 20px;\n    font-size: 14px;\n\n    th,\n    td {\n      padding: 12px;\n      border-bottom: 1px solid var(--global-border-color);\n    }\n\n    th {\n      text-align: left;\n      font-weight: bold;\n      background-color: var(--color-secondary-300);\n    }\n\n    tr th:first-child,\n    tr td:first-child {\n      border-left: 1px solid var(--global-border-color);\n    }\n\n    tr td:last-child,\n    tr th:last-child {\n      border-right: 1px solid var(--global-border-color);\n    }\n\n    thead td,\n    thead th {\n      border-top: 1px solid var(--global-border-color);\n    }\n\n    /* top-left border */\n\n    thead tr:first-child th:first-child {\n      border-top-left-radius: var(--panels-border-radius);\n    }\n\n    /* top-right border */\n\n    thead tr:first-child th:last-child {\n      border-top-right-radius: var(--panels-border-radius);\n      border-top: 1px solid var(--global-border-color);\n    }\n\n    /* bottom-left border */\n\n    tbody tr:last-child td:first-child {\n      border-bottom-left-radius: var(--panels-border-radius);\n    }\n\n    /* bottom-right border */\n\n    tbody tr:last-child td:last-child {\n      border-bottom-right-radius: var(--panels-border-radius);\n    }\n  }\n"], ["\n  table.md {\n    display: block;\n    width: 100%;\n    overflow: auto;\n    word-break: keep-all;\n    border-collapse: separate;\n    border-spacing: 0;\n    margin-top: 20px;\n    margin-bottom: 20px;\n    font-size: 14px;\n\n    th,\n    td {\n      padding: 12px;\n      border-bottom: 1px solid var(--global-border-color);\n    }\n\n    th {\n      text-align: left;\n      font-weight: bold;\n      background-color: var(--color-secondary-300);\n    }\n\n    tr th:first-child,\n    tr td:first-child {\n      border-left: 1px solid var(--global-border-color);\n    }\n\n    tr td:last-child,\n    tr th:last-child {\n      border-right: 1px solid var(--global-border-color);\n    }\n\n    thead td,\n    thead th {\n      border-top: 1px solid var(--global-border-color);\n    }\n\n    /* top-left border */\n\n    thead tr:first-child th:first-child {\n      border-top-left-radius: var(--panels-border-radius);\n    }\n\n    /* top-right border */\n\n    thead tr:first-child th:last-child {\n      border-top-right-radius: var(--panels-border-radius);\n      border-top: 1px solid var(--global-border-color);\n    }\n\n    /* bottom-left border */\n\n    tbody tr:last-child td:first-child {\n      border-bottom-left-radius: var(--panels-border-radius);\n    }\n\n    /* bottom-right border */\n\n    tbody tr:last-child td:last-child {\n      border-bottom-right-radius: var(--panels-border-radius);\n    }\n  }\n"])));
 // TODO: Can users specify another className or we should hardcode it?
 function headingAnchor(className) {
     if (className === void 0) { className = 'anchor'; }
@@ -39,5 +39,5 @@ function headingAnchor(className) {
 exports.headingAnchor = headingAnchor;
 exports.MarkdownWrapper = styled_components_1.default.main.attrs(function () { return ({
     'data-component-name': 'Markdown/MarkdownWrapper',
-}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--color-content);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n\n  a:not([role='button']) {\n    text-decoration: var(--link-decoration);\n    color: var(--link-color);\n\n    &:visited {\n      color: var(--link-color);\n    }\n\n    &:hover {\n      color: var(--link-color-hover);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--h-font-weight);\n    font-family: var(--h-font-family);\n    position: relative;\n\n    scroll-margin-top: 60px;\n  }\n\n  strong {\n    font-weight: var(--font-weight-bold);\n  }\n\n  hr {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--color-content);\n      font-weight: var(--font-weight-regular);\n      outline: 0;\n      padding: 0;\n      cursor: pointer;\n    }\n\n    > :not(summary):first-of-type {\n      margin-top: 1.25em;\n    }\n\n    > *:last-child {\n      margin-bottom: 1.25em;\n    }\n  }\n\n  ", ";\n\n  .code-snippets-tabs {\n    .snippets-tabs-headers {\n      font-size: 0.9em;\n\n      font-family: var(--h-font-family);\n\n      .tab-header {\n        text-align: center;\n        padding: 0.2em 0.5em;\n        display: inline-block;\n        cursor: pointer;\n        color: var(--color-content-secondary);\n\n        &.active {\n          color: var(--h-color);\n          font-weight: var(--font-weight-bold);\n        }\n      }\n    }\n\n    .tab-content {\n      margin-top: 4px;\n      display: none;\n\n      pre {\n        margin-top: 0;\n      }\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  p {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1 {\n    ", ";\n    margin: var(--h1-margin-top) var(--h1-margin-bottom);\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2 {\n    ", ";\n    margin: var(--h2-margin-top) var(--h2-margin-bottom);\n    ", ";\n  }\n\n  h3 {\n    ", ";\n    margin: var(--h3-margin-top) var(--h3-margin-bottom);\n    ", ";\n  }\n\n  h4 {\n    ", ";\n    margin: var(--h4-margin-top) var(--h4-margin-bottom);\n    ", ";\n  }\n\n  h5 {\n    ", ";\n    margin: var(--h5-margin-top) var(--h5-margin-bottom);\n    ", ";\n  }\n\n  h6 {\n    ", ";\n    margin: var(--h6-margin-top) var(--h6-margin-bottom);\n    ", ";\n  }\n\n  code {\n    color: var(--inline-code-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: 2px;\n    border: 1px solid var(--global-border-color);\n    padding: 0.1em 0.25em 0.2em;\n    font-weight: var(--code-font-weight);\n    word-break: break-word;\n    font-size: var(--code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n    border-left: 4px solid var(--global-border-color);\n    background-color: var(--bloquote-background-color);\n    color: var(--color-content);\n\n    & > p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  img {\n    max-width: 100%;\n    box-sizing: content-box;\n    margin: 0 auto;\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  > ul,\n  > p ul {\n    > ol,\n    > p ol {\n      padding-left: 2em;\n      margin: 0 0 1em;\n\n      ul,\n      ol {\n        margin-bottom: 0;\n        margin-top: 0;\n      }\n    }\n  }\n"], ["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--color-content);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n\n  a:not([role='button']) {\n    text-decoration: var(--link-decoration);\n    color: var(--link-color);\n\n    &:visited {\n      color: var(--link-color);\n    }\n\n    &:hover {\n      color: var(--link-color-hover);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--h-font-weight);\n    font-family: var(--h-font-family);\n    position: relative;\n\n    scroll-margin-top: 60px;\n  }\n\n  strong {\n    font-weight: var(--font-weight-bold);\n  }\n\n  hr {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--color-content);\n      font-weight: var(--font-weight-regular);\n      outline: 0;\n      padding: 0;\n      cursor: pointer;\n    }\n\n    > :not(summary):first-of-type {\n      margin-top: 1.25em;\n    }\n\n    > *:last-child {\n      margin-bottom: 1.25em;\n    }\n  }\n\n  ", ";\n\n  .code-snippets-tabs {\n    .snippets-tabs-headers {\n      font-size: 0.9em;\n\n      font-family: var(--h-font-family);\n\n      .tab-header {\n        text-align: center;\n        padding: 0.2em 0.5em;\n        display: inline-block;\n        cursor: pointer;\n        color: var(--color-content-secondary);\n\n        &.active {\n          color: var(--h-color);\n          font-weight: var(--font-weight-bold);\n        }\n      }\n    }\n\n    .tab-content {\n      margin-top: 4px;\n      display: none;\n\n      pre {\n        margin-top: 0;\n      }\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  p {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1 {\n    ", ";\n    margin: var(--h1-margin-top) var(--h1-margin-bottom);\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2 {\n    ", ";\n    margin: var(--h2-margin-top) var(--h2-margin-bottom);\n    ", ";\n  }\n\n  h3 {\n    ", ";\n    margin: var(--h3-margin-top) var(--h3-margin-bottom);\n    ", ";\n  }\n\n  h4 {\n    ", ";\n    margin: var(--h4-margin-top) var(--h4-margin-bottom);\n    ", ";\n  }\n\n  h5 {\n    ", ";\n    margin: var(--h5-margin-top) var(--h5-margin-bottom);\n    ", ";\n  }\n\n  h6 {\n    ", ";\n    margin: var(--h6-margin-top) var(--h6-margin-bottom);\n    ", ";\n  }\n\n  code {\n    color: var(--inline-code-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: 2px;\n    border: 1px solid var(--global-border-color);\n    padding: 0.1em 0.25em 0.2em;\n    font-weight: var(--code-font-weight);\n    word-break: break-word;\n    font-size: var(--code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n    border-left: 4px solid var(--global-border-color);\n    background-color: var(--bloquote-background-color);\n    color: var(--color-content);\n\n    & > p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  img {\n    max-width: 100%;\n    box-sizing: content-box;\n    margin: 0 auto;\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  > ul,\n  > p ul {\n    > ol,\n    > p ol {\n      padding-left: 2em;\n      margin: 0 0 1em;\n\n      ul,\n      ol {\n        margin-bottom: 0;\n        margin-top: 0;\n      }\n    }\n  }\n"])), exports.baseTable, (0, utils_1.typography)('h1', 'h'), headingAnchor(), (0, utils_1.typography)('h2', 'h'), headingAnchor(), (0, utils_1.typography)('h3', 'h'), headingAnchor(), (0, utils_1.typography)('h4', 'h'), headingAnchor(), (0, utils_1.typography)('h5', 'h'), headingAnchor(), (0, utils_1.typography)('h6', 'h'), headingAnchor());
+}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--color-content);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n\n  a:not([role='button']) {\n    text-decoration: var(--link-decoration);\n    color: var(--link-color);\n\n    &:visited {\n      color: var(--link-color);\n    }\n\n    &:hover {\n      color: var(--link-color-hover);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1.md,\n  h2.md,\n  h3.md,\n  h4.md,\n  h5.md,\n  h6.md {\n    font-weight: var(--h-font-weight);\n    font-family: var(--h-font-family);\n    position: relative;\n\n    scroll-margin-top: 60px;\n  }\n\n  strong {\n    font-weight: var(--font-weight-bold);\n  }\n\n  hr {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--color-content);\n      font-weight: var(--font-weight-regular);\n      outline: 0;\n      padding: 0;\n      cursor: pointer;\n    }\n\n    > :not(summary):first-of-type {\n      margin-top: 1.25em;\n    }\n\n    > *:last-child {\n      margin-bottom: 1.25em;\n    }\n  }\n\n  ", ";\n\n  .code-snippets-tabs {\n    .snippets-tabs-headers {\n      font-size: 0.9em;\n\n      font-family: var(--h-font-family);\n\n      .tab-header {\n        text-align: center;\n        padding: 0.2em 0.5em;\n        display: inline-block;\n        cursor: pointer;\n        color: var(--color-content-secondary);\n\n        &.active {\n          color: var(--h-color);\n          font-weight: var(--font-weight-bold);\n        }\n      }\n    }\n\n    .tab-content {\n      margin-top: 4px;\n      display: none;\n\n      pre {\n        margin-top: 0;\n      }\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  p {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1.md {\n    ", ";\n    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2.md {\n    ", ";\n    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n    ", ";\n  }\n\n  h3.md {\n    ", ";\n    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n    ", ";\n  }\n\n  h4.md {\n    ", ";\n    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n    ", ";\n  }\n\n  h5.md {\n    ", ";\n    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n    ", ";\n  }\n\n  h6.md {\n    ", ";\n    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n    ", ";\n  }\n\n  code {\n    color: var(--inline-code-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: 2px;\n    border: 1px solid var(--global-border-color);\n    padding: 0.1em 0.25em 0.2em;\n    font-weight: var(--code-font-weight);\n    word-break: break-word;\n    font-size: var(--code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n    border-left: 4px solid var(--global-border-color);\n    background-color: var(--bloquote-background-color);\n    color: var(--color-content);\n\n    & > p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  img {\n    max-width: 100%;\n    box-sizing: content-box;\n    margin: 0 auto;\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  > ul,\n  > p ul {\n    > ol,\n    > p ol {\n      padding-left: 2em;\n      margin: 0 0 1em;\n\n      ul,\n      ol {\n        margin-bottom: 0;\n        margin-top: 0;\n      }\n    }\n  }\n"], ["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--color-content);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n\n  a:not([role='button']) {\n    text-decoration: var(--link-decoration);\n    color: var(--link-color);\n\n    &:visited {\n      color: var(--link-color);\n    }\n\n    &:hover {\n      color: var(--link-color-hover);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1.md,\n  h2.md,\n  h3.md,\n  h4.md,\n  h5.md,\n  h6.md {\n    font-weight: var(--h-font-weight);\n    font-family: var(--h-font-family);\n    position: relative;\n\n    scroll-margin-top: 60px;\n  }\n\n  strong {\n    font-weight: var(--font-weight-bold);\n  }\n\n  hr {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--color-content);\n      font-weight: var(--font-weight-regular);\n      outline: 0;\n      padding: 0;\n      cursor: pointer;\n    }\n\n    > :not(summary):first-of-type {\n      margin-top: 1.25em;\n    }\n\n    > *:last-child {\n      margin-bottom: 1.25em;\n    }\n  }\n\n  ", ";\n\n  .code-snippets-tabs {\n    .snippets-tabs-headers {\n      font-size: 0.9em;\n\n      font-family: var(--h-font-family);\n\n      .tab-header {\n        text-align: center;\n        padding: 0.2em 0.5em;\n        display: inline-block;\n        cursor: pointer;\n        color: var(--color-content-secondary);\n\n        &.active {\n          color: var(--h-color);\n          font-weight: var(--font-weight-bold);\n        }\n      }\n    }\n\n    .tab-content {\n      margin-top: 4px;\n      display: none;\n\n      pre {\n        margin-top: 0;\n      }\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  p {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1.md {\n    ", ";\n    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2.md {\n    ", ";\n    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n    ", ";\n  }\n\n  h3.md {\n    ", ";\n    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n    ", ";\n  }\n\n  h4.md {\n    ", ";\n    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n    ", ";\n  }\n\n  h5.md {\n    ", ";\n    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n    ", ";\n  }\n\n  h6.md {\n    ", ";\n    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\n    ", ";\n  }\n\n  code {\n    color: var(--inline-code-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: 2px;\n    border: 1px solid var(--global-border-color);\n    padding: 0.1em 0.25em 0.2em;\n    font-weight: var(--code-font-weight);\n    word-break: break-word;\n    font-size: var(--code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n    border-left: 4px solid var(--global-border-color);\n    background-color: var(--bloquote-background-color);\n    color: var(--color-content);\n\n    & > p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  img {\n    max-width: 100%;\n    box-sizing: content-box;\n    margin: 0 auto;\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  > ul,\n  > p ul {\n    > ol,\n    > p ol {\n      padding-left: 2em;\n      margin: 0 0 1em;\n\n      ul,\n      ol {\n        margin-bottom: 0;\n        margin-top: 0;\n      }\n    }\n  }\n"])), exports.baseTable, (0, utils_1.typography)('h1', 'h'), headingAnchor(), (0, utils_1.typography)('h2', 'h'), headingAnchor(), (0, utils_1.typography)('h3', 'h'), headingAnchor(), (0, utils_1.typography)('h4', 'h'), headingAnchor(), (0, utils_1.typography)('h5', 'h'), headingAnchor(), (0, utils_1.typography)('h6', 'h'), headingAnchor());
 var templateObject_1, templateObject_2, templateObject_3;

package/Navbar/Navbar.js

@@ -16,7 +16,7 @@ var Navbar_1 = require("../Navbar");
 function Navbar(_a) {
     var _b;
     var menu = _a.menu, logo = _a.logo, search = _a.search;
-    var settings = (0, hooks_1.useThemeSettings)(constants_1.USER_THEME_ALIAS);
+    var settings = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME);
     var searchSettings = settings.search;
     var hideSearch = (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.hide) || ((searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) && (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) !== 'navbar');
     if ((_b = settings === null || settings === void 0 ? void 0 : settings.navbar) === null || _b === void 0 ? void 0 : _b.hide) {

package/PageNavigation/NextPageLink.js

@@ -1,10 +1,15 @@
 "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.NextPageLink = void 0;
 var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var hooks_1 = require("../mocks/hooks");
 var constants_1 = require("../mocks/constants");
 var Button_1 = require("../Button/Button");
@@ -16,6 +21,8 @@ function NextPageLink() {
         return react_1.default.createElement("div", null, "\u00A0");
     }
     var label = ((_c = (_b = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.navigation) === null || _b === void 0 ? void 0 : _b.nextPageLink) === null || _c === void 0 ? void 0 : _c.label) || "Next to ".concat(nextPage.label);
-    return (react_1.default.createElement(Button_1.Button, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink" }, label));
+    return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink" }, label));
 }
 exports.NextPageLink = NextPageLink;
+var StyledButton = (0, styled_components_1.default)(Button_1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: var(--font-family-base);\n"], ["\n  font-family: var(--font-family-base);\n"])));
+var templateObject_1;

package/PageNavigation/PreviousPageLink.js

@@ -1,10 +1,15 @@
 "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.PreviousPageLink = void 0;
 var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
 var hooks_1 = require("../mocks/hooks");
 var constants_1 = require("../mocks/constants");
 var Button_1 = require("../Button/Button");
@@ -16,6 +21,8 @@ function PreviousPageLink() {
         return react_1.default.createElement("div", null, "\u00A0");
     }
     var label = ((_c = (_b = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.navigation) === null || _b === void 0 ? void 0 : _b.nextPageLink) === null || _c === void 0 ? void 0 : _c.label) || "Back to ".concat(prevPage.label);
-    return (react_1.default.createElement(Button_1.Button, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink" }, label));
+    return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink" }, label));
 }
 exports.PreviousPageLink = PreviousPageLink;
+var StyledButton = (0, styled_components_1.default)(Button_1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: var(--font-family-base);\n"], ["\n  font-family: var(--font-family-base);\n"])));
+var templateObject_1;

package/Typography/CompactTypography.d.ts

@@ -1,10 +1,6 @@
-export declare const CompactTypography: import("styled-components").StyledComponent<"p", any, {
+export declare const CompactTypography: import("styled-components").StyledComponent<"div", any, {
     'data-component-name': string;
-} & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
-    color?: string | undefined;
-    mt?: string | undefined;
-    mb?: string | undefined;
-} & {
+} & import("../Typography/Typography").TypographyProps & {
     mt: string;
     mb: string;
     'data-component-name': string;

package/Typography/Typography.d.ts

@@ -1,8 +1,15 @@
-import { TypographyProps } from 'styled-system';
-export declare const Typography: import("styled-components").StyledComponent<"p", any, {
+export interface TypographyProps {
+    color?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    fontStyle?: string;
+    fontWeight?: string;
+    lineHeight?: string;
+    letterSpacing?: string;
+    marginBottom?: string;
+    marginTop?: string;
+    textAlign?: string;
+}
+export declare const Typography: import("styled-components").StyledComponent<"div", any, {
     'data-component-name': string;
-} & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
-    color?: string | undefined;
-    mt?: string | undefined;
-    mb?: string | undefined;
-}, "data-component-name">;
+} & TypographyProps, "data-component-name">;

package/Typography/Typography.js

@@ -9,14 +9,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Typography = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-var styled_system_1 = require("styled-system");
-exports.Typography = styled_components_1.default.p.attrs(function () { return ({
+exports.Typography = styled_components_1.default.div.attrs(function () { return ({
     'data-component-name': 'Typography/Typography',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n  color: var(--color-content);\n  ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"], ["\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n  color: var(--color-content);\n  ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  ", "\n"])), styled_system_1.color, function (_a) {
-    var mt = _a.mt;
-    return mt || '1em';
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  letter-spacing: ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  text-align: ", ";\n"])), function (_a) {
+    var color = _a.color;
+    return color || 'var(--color-content)';
 }, function (_a) {
-    var mb = _a.mb;
-    return mb || '1em';
-}, styled_system_1.typography);
+    var fontFamily = _a.fontFamily;
+    return fontFamily || 'var(--font-family-base)';
+}, function (_a) {
+    var fontSize = _a.fontSize;
+    return fontSize || 'var(--font-size-base)';
+}, function (_a) {
+    var fontStyle = _a.fontStyle;
+    return fontStyle;
+}, function (_a) {
+    var fontWeight = _a.fontWeight;
+    return fontWeight || 'var(--font-weight-regular)';
+}, function (_a) {
+    var lineHeight = _a.lineHeight;
+    return lineHeight || 'var(--line-height-base)';
+}, function (_a) {
+    var letterSpacing = _a.letterSpacing;
+    return letterSpacing;
+}, function (_a) {
+    var marginBottom = _a.marginBottom;
+    return marginBottom;
+}, function (_a) {
+    var marginTop = _a.marginTop;
+    return marginTop;
+}, function (_a) {
+    var textAlign = _a.textAlign;
+    return textAlign;
+});
 var templateObject_1;

package/globalStyle.js

@@ -10,7 +10,7 @@ var baseColors = (0, styled_components_1.css)(templateObject_1 || (templateObjec
 var httpColors = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /**\n    * @tokens HTTP Colors\n    * @presenter Color\n    */\n  --color-http-get: #3a9601;\n  --color-http-post: #0065fb;\n  --color-http-put: #93527b;\n  --color-http-options: #947014;\n  --color-http-patch: #bf581d;\n  --color-http-delete: #c83637;\n  --color-http-basic: #707070;\n  --color-http-link: #07818f;\n  --color-http-head: #a23dad;\n  --color-http-hook: var(--color-http-post);\n  // @tokens End\n"], ["\n  /**\n    * @tokens HTTP Colors\n    * @presenter Color\n    */\n  --color-http-get: #3a9601;\n  --color-http-post: #0065fb;\n  --color-http-put: #93527b;\n  --color-http-options: #947014;\n  --color-http-patch: #bf581d;\n  --color-http-delete: #c83637;\n  --color-http-basic: #707070;\n  --color-http-link: #07818f;\n  --color-http-head: #a23dad;\n  --color-http-hook: var(--color-http-post);\n  // @tokens End\n"])));
 var responseColors = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  /**\n    * @tokens Response colors\n    * @presenter Color\n    */\n  --response-success-border-color: #b1e996;\n  --response-success-background-color: #f6fff4;\n  --response-success-text-color: var(--response-success-border-color);\n\n  --response-error-border-color: #ffc9c9;\n  --response-error-background-color: #fff4f4;\n  --response-error-text-color: var(--response-error-border-color);\n\n  --response-redirect-border-color: var(--color-warning-500);\n  --response-redirect-background-color: #ffa5001a;\n  --response-redirect-text-color: var(--response-redirect-border-color);\n\n  --response-info-border-color: #87ceeb;\n  --response-info-background-color: #87ceeb1a;\n  --response-info-text-color: var(--response-info-border-color);\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Response colors\n    * @presenter Color\n    */\n  --response-success-border-color: #b1e996;\n  --response-success-background-color: #f6fff4;\n  --response-success-text-color: var(--response-success-border-color);\n\n  --response-error-border-color: #ffc9c9;\n  --response-error-background-color: #fff4f4;\n  --response-error-text-color: var(--response-error-border-color);\n\n  --response-redirect-border-color: var(--color-warning-500);\n  --response-redirect-background-color: #ffa5001a;\n  --response-redirect-text-color: var(--response-redirect-border-color);\n\n  --response-info-border-color: #87ceeb;\n  --response-info-background-color: #87ceeb1a;\n  --response-info-text-color: var(--response-info-border-color);\n\n  // @tokens End\n"])));
 var typography = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  /* === Typography === */\n\n  /**\n    * @tokens Typography Colors\n    * @presenter Color\n    */\n  --color-content: #1f2933;\n  --color-content-inverse: var(--color-secondary-200);\n  --color-content-secondary: #7b8794;\n\n  /**\n    * @tokens Font Sizes\n    * @presenter FontSize\n    */\n  --font-size-base: 14px;\n  --font-size-small: 12px;\n\n  /**\n    * @tokens Line Heights\n    * @presenter LineHeight\n    */\n  --line-height-base: 1.5em;\n\n  /**\n    * @tokens Font Weights\n    * @presenter FontWeight\n    */\n  --font-weight-regular: 400;\n  --font-weight-bold: 600;\n  --font-weight-bolder: 700;\n\n  /**\n    * @tokens Font Families\n    * @presenter FontFamily\n    */\n  --font-family-base: Source Sans Pro, sans-serif;\n  --font-family-monospaced: Source Code Pro, monospace;\n\n  /**\n  * @tokens Rendering\n  */\n  --smoothing: antialiased; // text-smoothing\n  --text-rendering: optimizeSpeed; // text-rendering\n\n  // TODO: Not sure if Spacing should be in typography\n  /**\n  * @tokens Spacings\n  * @presenter Spacing\n  */\n  --spacing-unit: 5px;\n  --spacing-horizontal: calc(var(--spacing-unit) * 8);\n  --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n  // @tokens End\n"], ["\n  /* === Typography === */\n\n  /**\n    * @tokens Typography Colors\n    * @presenter Color\n    */\n  --color-content: #1f2933;\n  --color-content-inverse: var(--color-secondary-200);\n  --color-content-secondary: #7b8794;\n\n  /**\n    * @tokens Font Sizes\n    * @presenter FontSize\n    */\n  --font-size-base: 14px;\n  --font-size-small: 12px;\n\n  /**\n    * @tokens Line Heights\n    * @presenter LineHeight\n    */\n  --line-height-base: 1.5em;\n\n  /**\n    * @tokens Font Weights\n    * @presenter FontWeight\n    */\n  --font-weight-regular: 400;\n  --font-weight-bold: 600;\n  --font-weight-bolder: 700;\n\n  /**\n    * @tokens Font Families\n    * @presenter FontFamily\n    */\n  --font-family-base: Source Sans Pro, sans-serif;\n  --font-family-monospaced: Source Code Pro, monospace;\n\n  /**\n  * @tokens Rendering\n  */\n  --smoothing: antialiased; // text-smoothing\n  --text-rendering: optimizeSpeed; // text-rendering\n\n  // TODO: Not sure if Spacing should be in typography\n  /**\n  * @tokens Spacings\n  * @presenter Spacing\n  */\n  --spacing-unit: 5px;\n  --spacing-horizontal: calc(var(--spacing-unit) * 8);\n  --spacing-vertical: calc(var(--spacing-unit) * 4);\n\n  // @tokens End\n"])));
-var headingsTypography = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  // --h-{css-property-name} is fallback for h1...h6\n\n  /**\n    * @tokens Typography headings font\n    */\n  --h-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n  --h-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n  --h2-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n    * @tokens Typography headings color\n    * @presenter Color\n    */\n  --h-color: var(--color-content);\n\n  /**\n    * @tokens Typography headings font size\n    * @presenter FontSize\n    */\n  --h1-font-size: 36px;\n  --h2-font-size: 28px;\n  --h3-font-size: 18px;\n  --h4-font-size: 16px;\n  --h5-font-size: 14px;\n  --h6-font-size: 12px;\n\n  /**\n    * @tokens Typography headings line height\n    * @presenter LineHeight\n    */\n  --h1-line-height: 36px;\n  --h2-line-height: 28px;\n  --h3-line-height: 18px;\n  --h4-line-height: 16px;\n  --h5-line-height: 14px;\n  --h6-line-height: 12px;\n\n  /**\n    * @tokens Typography headings margin\n    * @presenter Spacing\n    */\n  --h1-margin-top: 1.35em;\n  --h1-margin-bottom: 0.9em;\n  --h2-margin-top: 1.25em;\n  --h2-margin-bottom: 0.8em;\n  --h3-margin-top: 1.25em;\n  --h3-margin-bottom: 0.8em;\n  // @tokens End\n"], ["\n  // --h-{css-property-name} is fallback for h1...h6\n\n  /**\n    * @tokens Typography headings font\n    */\n  --h-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n  --h-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n  --h2-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n    * @tokens Typography headings color\n    * @presenter Color\n    */\n  --h-color: var(--color-content);\n\n  /**\n    * @tokens Typography headings font size\n    * @presenter FontSize\n    */\n  --h1-font-size: 36px;\n  --h2-font-size: 28px;\n  --h3-font-size: 18px;\n  --h4-font-size: 16px;\n  --h5-font-size: 14px;\n  --h6-font-size: 12px;\n\n  /**\n    * @tokens Typography headings line height\n    * @presenter LineHeight\n    */\n  --h1-line-height: 36px;\n  --h2-line-height: 28px;\n  --h3-line-height: 18px;\n  --h4-line-height: 16px;\n  --h5-line-height: 14px;\n  --h6-line-height: 12px;\n\n  /**\n    * @tokens Typography headings margin\n    * @presenter Spacing\n    */\n  --h1-margin-top: 1.35em;\n  --h1-margin-bottom: 0.9em;\n  --h2-margin-top: 1.25em;\n  --h2-margin-bottom: 0.8em;\n  --h3-margin-top: 1.25em;\n  --h3-margin-bottom: 0.8em;\n  // @tokens End\n"])));
+var headingsTypography = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  // --h-{css-property-name} is fallback for h1...h6\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /**\n    * @tokens Typography headings font\n    */\n  --h-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n  --h-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n  --h2-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n    * @tokens Typography headings color\n    * @presenter Color\n    */\n  --h-color: var(--color-content);\n\n  /**\n    * @tokens Typography headings font size\n    * @presenter FontSize\n    */\n  --h1-font-size: 36px;\n  --h2-font-size: 28px;\n  --h3-font-size: 18px;\n  --h4-font-size: 16px;\n  --h5-font-size: 14px;\n  --h6-font-size: 12px;\n\n  /**\n    * @tokens Typography headings line height\n    * @presenter LineHeight\n    */\n  --h1-line-height: 36px;\n  --h2-line-height: 28px;\n  --h3-line-height: 18px;\n  --h4-line-height: 16px;\n  --h5-line-height: 14px;\n  --h6-line-height: 12px;\n\n  /**\n    * @tokens Typography headings margin\n    * @presenter Spacing\n    */\n  --h1-margin-top: 1.35em;\n  --h1-margin-bottom: 0.9em;\n  --h2-margin-top: 1.25em;\n  --h2-margin-bottom: 0.8em;\n  --h3-margin-top: 1.25em;\n  --h3-margin-bottom: 0.8em;\n  // @tokens End\n"], ["\n  // --h-{css-property-name} is fallback for h1...h6\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /**\n    * @tokens Typography headings font\n    */\n  --h-font-family: Source Sans Pro, sans-serif; // @presenter FontFamily\n  --h-font-weight: var(--font-weight-bolder); // @presenter FontWeight\n  --h2-font-weight: var(--font-weight-bold); // @presenter FontWeight\n\n  /**\n    * @tokens Typography headings color\n    * @presenter Color\n    */\n  --h-color: var(--color-content);\n\n  /**\n    * @tokens Typography headings font size\n    * @presenter FontSize\n    */\n  --h1-font-size: 36px;\n  --h2-font-size: 28px;\n  --h3-font-size: 18px;\n  --h4-font-size: 16px;\n  --h5-font-size: 14px;\n  --h6-font-size: 12px;\n\n  /**\n    * @tokens Typography headings line height\n    * @presenter LineHeight\n    */\n  --h1-line-height: 36px;\n  --h2-line-height: 28px;\n  --h3-line-height: 18px;\n  --h4-line-height: 16px;\n  --h5-line-height: 14px;\n  --h6-line-height: 12px;\n\n  /**\n    * @tokens Typography headings margin\n    * @presenter Spacing\n    */\n  --h1-margin-top: 1.35em;\n  --h1-margin-bottom: 0.9em;\n  --h2-margin-top: 1.25em;\n  --h2-margin-bottom: 0.8em;\n  --h3-margin-top: 1.25em;\n  --h3-margin-bottom: 0.8em;\n  // @tokens End\n"])));
 var borders = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /**\n    * @tokens Borders\n    * @presenter Border\n    */\n  --global-border-width: 1px;\n\n  /**\n    * @tokens Border Radius\n    * @presenter BorderRadius\n    */\n  --global-border-radius: 4px;\n\n  /**\n    * @tokens Border Colors\n    * @presenter Color\n    */\n  --global-border-color: var(--color-secondary-400);\n  --global-border-color-secondary: #616e7c;\n  --global-background-color: transparent;\n\n  // @tokens End\n"], ["\n  /**\n    * @tokens Borders\n    * @presenter Border\n    */\n  --global-border-width: 1px;\n\n  /**\n    * @tokens Border Radius\n    * @presenter BorderRadius\n    */\n  --global-border-radius: 4px;\n\n  /**\n    * @tokens Border Colors\n    * @presenter Color\n    */\n  --global-border-color: var(--color-secondary-400);\n  --global-border-color-secondary: #616e7c;\n  --global-background-color: transparent;\n\n  // @tokens End\n"])));
 var buttons = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n\n  /**\n    * @tokens Button default colors\n    */\n  --button-color: white; // @presenter Color\n  --button-background-color: var(--color-emphasis-500); // @presenter Color\n  --button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n  --button-active-background-color: var(--color-emphasis-700); // @presenter Color\n  --button-outlined-active-border-color: var(--color-emphasis-800); // @presenter Color\n\n  /**\n    * @tokens Button primary colors\n    */\n  .button-color-primary {\n    --button-color: white; // @presenter Color\n    --button-background-color: var(--color-primary-500); // @presenter Color\n    --button-hover-background-color: var(--color-primary-600); // @presenter Color\n    --button-active-background-color: var(--color-primary-700); // @presenter Color\n    --button-outlined-active-border-color: var(--color-primary-800); // @presenter Color\n  }\n\n  /**\n    * @tokens Button secondary colors\n    */\n  .button-color-secondary {\n    --button-color: var(--color-emphasis-800); // @presenter Color\n    --button-background-color: var(--color-secondary-400); // @presenter Color\n    --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n    --button-active-background-color: var(--color-secondary-600); // @presenter Color\n    --button-outlined-active-border-color: var(--color-secondary-700); // @presenter Color\n  }\n\n  /**\n    * @tokens Button borders\n    */\n  --button-border-radius: var(--global-border-radius); // @presenter BorderRadius\n  --button-box-shadow: none; // @presenter Shadow\n  --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n\n  /**\n    * @tokens Button typography\n    */\n  --button-font-family: inherit; // @presenter FontFamily\n  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --button-small-font-size: 12px; // @presenter FontSize\n  --button-small-padding: 8px 10px;\n  --button-small-min-width: 90px; // @presenter Spacing\n  --button-medium-font-size: 14px; // @presenter FontSize\n  --button-medium-padding: 8px 20px;\n  --button-medium-min-width: 120px; // @presenter Spacing\n  --button-large-font-size: 14px; // @presenter FontSize\n  --button-large-padding: 12px 24px;\n  --button-large-min-width: 150px; // @presenter Spacing\n  --button-xlarge-font-size: 16px; // @presenter FontSize\n  --button-xlarge-padding: 20px 24px;\n  --button-xlarge-min-width: 200px; // @presenter Spacing\n\n  // @tokens End\n"], ["\n  /*\n  * Static classnames that can be used to override styles for components:\n  * download-specification-button, next-section-button, button-base\n  */\n\n  /**\n    * @tokens Button default colors\n    */\n  --button-color: white; // @presenter Color\n  --button-background-color: var(--color-emphasis-500); // @presenter Color\n  --button-hover-background-color: var(--color-emphasis-600); // @presenter Color\n  --button-active-background-color: var(--color-emphasis-700); // @presenter Color\n  --button-outlined-active-border-color: var(--color-emphasis-800); // @presenter Color\n\n  /**\n    * @tokens Button primary colors\n    */\n  .button-color-primary {\n    --button-color: white; // @presenter Color\n    --button-background-color: var(--color-primary-500); // @presenter Color\n    --button-hover-background-color: var(--color-primary-600); // @presenter Color\n    --button-active-background-color: var(--color-primary-700); // @presenter Color\n    --button-outlined-active-border-color: var(--color-primary-800); // @presenter Color\n  }\n\n  /**\n    * @tokens Button secondary colors\n    */\n  .button-color-secondary {\n    --button-color: var(--color-emphasis-800); // @presenter Color\n    --button-background-color: var(--color-secondary-400); // @presenter Color\n    --button-hover-background-color: var(--color-secondary-500); // @presenter Color\n    --button-active-background-color: var(--color-secondary-600); // @presenter Color\n    --button-outlined-active-border-color: var(--color-secondary-700); // @presenter Color\n  }\n\n  /**\n    * @tokens Button borders\n    */\n  --button-border-radius: var(--global-border-radius); // @presenter BorderRadius\n  --button-box-shadow: none; // @presenter Shadow\n  --button-active-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1); // @presenter Shadow\n\n  /**\n    * @tokens Button typography\n    */\n  --button-font-family: inherit; // @presenter FontFamily\n  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight\n  --button-small-font-size: 12px; // @presenter FontSize\n  --button-small-padding: 8px 10px;\n  --button-small-min-width: 90px; // @presenter Spacing\n  --button-medium-font-size: 14px; // @presenter FontSize\n  --button-medium-padding: 8px 20px;\n  --button-medium-min-width: 120px; // @presenter Spacing\n  --button-large-font-size: 14px; // @presenter FontSize\n  --button-large-padding: 12px 24px;\n  --button-large-min-width: 150px; // @presenter Spacing\n  --button-xlarge-font-size: 16px; // @presenter FontSize\n  --button-xlarge-padding: 20px 24px;\n  --button-xlarge-min-width: 200px; // @presenter Spacing\n\n  // @tokens End\n"])));
 var sidebar = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  /* === Sidebar === */\n\n  /**\n    * @tokens Sidebar typography\n    */\n  --sidebar-font-size: var(--font-size-base);\n  --sidebar-font-family: var(--font-family-base);\n  --sidebar-word-break: 'inherit';\n\n  /**\n    * @tokens Sidebar colors\n    * @presenter Color\n    */\n  --sidebar-background-color: #fff;\n  --sidebar-right-line-color: var(--global-border-color);\n  --sidebar-separator-label-color: var(--sidebar-item-color);\n  --sidebar-separator-line-color: #dadada;\n  --sidebar-chevron-color: var(--sidebar-item-color);\n\n  /**\n    * @tokens Sidebar spacing\n    * @presenter Spacing\n    */\n  --sidebar-width: 285px; // @presenter NO\n\n  --sidebar-spacing-unit: 8px;\n  --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-spacing-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n  --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n\n  --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n  /**\n    * @tokens Sidebar border\n    */\n  --sidebar-border-radius: 4px; // @presenter BorderRadius\n\n  /* === Sidebar Item === */\n\n  /**\n    * @tokens Sidebar item typography\n    */\n  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n  /**\n    * @tokens Sidebar item colors\n    *  @presenter Color\n    */\n  --sidebar-item-color: var(--color-content);\n  --sidebar-item-active-color: var(--color-content);\n  --sidebar-item-background-color: #fff;\n  --sidebar-item-active-background-color: var(--global-border-color);\n\n  /**\n    * @tokens Sidebar item spacing\n    * @presenter Spacing\n    */\n  --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  /**\n    * @tokens Sidebar item border\n    */\n  --sidebar-item-border-radius: 4px; // @presenter BorderRadius\n\n  // @tokens End\n"], ["\n  /* === Sidebar === */\n\n  /**\n    * @tokens Sidebar typography\n    */\n  --sidebar-font-size: var(--font-size-base);\n  --sidebar-font-family: var(--font-family-base);\n  --sidebar-word-break: 'inherit';\n\n  /**\n    * @tokens Sidebar colors\n    * @presenter Color\n    */\n  --sidebar-background-color: #fff;\n  --sidebar-right-line-color: var(--global-border-color);\n  --sidebar-separator-label-color: var(--sidebar-item-color);\n  --sidebar-separator-line-color: #dadada;\n  --sidebar-chevron-color: var(--sidebar-item-color);\n\n  /**\n    * @tokens Sidebar spacing\n    * @presenter Spacing\n    */\n  --sidebar-width: 285px; // @presenter NO\n\n  --sidebar-spacing-unit: 8px;\n  --sidebar-spacing-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-spacing-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  --sidebar-margin-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-padding-horizontal: var(--sidebar-spacing-unit);\n  --sidebar-padding-vertical: var(--sidebar-spacing-unit);\n  --sidebar-spacing-padding-vertical: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n  --sidebar-spacing-padding-horizontal: var(--sidebar-spacing-unit); // TODO: seems like duplicated\n\n  --sidebar-chevron-size: var(--sidebar-spacing-unit);\n\n  /**\n    * @tokens Sidebar border\n    */\n  --sidebar-border-radius: 4px; // @presenter BorderRadius\n\n  /* === Sidebar Item === */\n\n  /**\n    * @tokens Sidebar item typography\n    */\n  --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily\n  --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize\n\n  /**\n    * @tokens Sidebar item colors\n    *  @presenter Color\n    */\n  --sidebar-item-color: var(--color-content);\n  --sidebar-item-active-color: var(--color-content);\n  --sidebar-item-background-color: #fff;\n  --sidebar-item-active-background-color: var(--global-border-color);\n\n  /**\n    * @tokens Sidebar item spacing\n    * @presenter Spacing\n    */\n  --sidebar-item-spacing-offset-top: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-left: calc(var(--sidebar-spacing-unit) * 2);\n  --sidebar-item-spacing-offset-nesting: calc(var(--sidebar-spacing-unit) * 2);\n\n  /**\n    * @tokens Sidebar item border\n    */\n  --sidebar-item-border-radius: 4px; // @presenter BorderRadius\n\n  // @tokens End\n"])));

package/hooks/useActiveSectionId.d.ts

@@ -1,3 +1,3 @@
-import { Location } from 'history';
+import type { Location } from 'history';
 export declare type UseActiveSectionIdReturnType = string;
 export declare function useActiveSectionId(location: Location, hasOverviewPage?: boolean): UseActiveSectionIdReturnType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.24",
+  "version": "0.1.27",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Cards/Card.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+import { H3 } from '@theme/Typography';
+import { ResolvedNavItem } from '@theme/types/portal';
+
+export interface CardProps {
+  title?: string;
+  icon?: string;
+  links: ResolvedNavItem;
+}
+
+export function Card(props: CardProps): JSX.Element {
+  return (
+    <CardWrapper data-component-name="Cards/Card">
+      {props.icon && <img src={props?.icon} alt={props?.title} />}
+      {props.title && <H3>{props.title}</H3>}
+      {props.links.items && (
+        <CardLinksList>
+          {props.links.items.map((item) => (
+            <li key={item.label}>
+              <Link to={item.link as string}>{item.label}</Link>
+            </li>
+          ))}
+        </CardLinksList>
+      )}
+    </CardWrapper>
+  );
+}
+
+const CardWrapper = styled.div`
+  border-radius: 10px;
+  box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+  padding: 20px;
+  margin: 0 20px 20px 0;
+  min-width: 25%;
+  font-family: var(--font-family-base);
+`;
+
+const CardLinksList = styled.ul`
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  li {
+    margin-bottom: 10px;
+  }
+`;

package/src/Cards/CardsBlock.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const CardsBlock = styled.div.attrs(() => ({
+  'data-component-name': 'Cards/CardsBlock',
+}))`
+  display: flex;
+  padding: 20px 0;
+  justify-content: space-between;
+`;

package/src/Footer/Footer.tsx

@@ -5,14 +5,14 @@ import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
 import type { NavGroupRecord } from '@theme/types/portal';
 import { useThemeSettings } from '@portal/hooks';
-import { USER_THEME_ALIAS } from '@portal/constants';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
 
 interface FooterProps {
   data: NavGroupRecord;
 }
 
 export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null {
-  const { footer } = useThemeSettings(USER_THEME_ALIAS);
+  const { footer } = useThemeSettings(DEFAULT_THEME_NAME);
 
   if (!(columns?.length || copyrightText) || footer?.hide) {
     return null;

package/src/Markdown/Heading.tsx

@@ -1,5 +1,12 @@
 import React, { createElement, PropsWithChildren } from 'react';
 
+import { concatClassNames } from '@theme/utils';
+
+/**
+ * Class name for all MD tags
+ */
+const mdClassName = 'md';
+
 const SvgIcon = (
   <svg
     aria-hidden="true"
@@ -22,14 +29,18 @@ export function Heading({
   children,
 }: PropsWithChildren<{ level: number; id: string }>): JSX.Element {
   const linkEl = (
-    <a href={`#${id}`} className="anchor before">
+    <a href={`#${id}`} className={concatClassNames('anchor', 'before')}>
       {SvgIcon}
     </a>
   );
 
   return createElement(
     `h${level}`,
-    { id, className: 'heading-anchor', 'data-component-name': 'Markdown/Heading/Heading' },
+    {
+      id,
+      className: concatClassNames('heading-anchor', mdClassName),
+      'data-component-name': 'Markdown/Heading/Heading',
+    },
     <>
       {linkEl}
       {children}

package/src/Markdown/MarkdownWrapper.tsx

@@ -3,7 +3,7 @@ import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
 import { typography } from '@theme/utils';
 
 export const baseTable = css`
-  table {
+  table.md {
     display: block;
     width: 100%;
     overflow: auto;
@@ -13,58 +13,58 @@ export const baseTable = css`
     margin-top: 20px;
     margin-bottom: 20px;
     font-size: 14px;
-  }
 
-  table th,
-  table td {
-    padding: 12px;
-    border-bottom: 1px solid var(--global-border-color);
-  }
+    th,
+    td {
+      padding: 12px;
+      border-bottom: 1px solid var(--global-border-color);
+    }
 
-  table th {
-    text-align: left;
-    font-weight: bold;
-    background-color: var(--color-secondary-300);
-  }
+    th {
+      text-align: left;
+      font-weight: bold;
+      background-color: var(--color-secondary-300);
+    }
 
-  table tr th:first-child,
-  table tr td:first-child {
-    border-left: 1px solid var(--global-border-color);
-  }
+    tr th:first-child,
+    tr td:first-child {
+      border-left: 1px solid var(--global-border-color);
+    }
 
-  table tr td:last-child,
-  table tr th:last-child {
-    border-right: 1px solid var(--global-border-color);
-  }
+    tr td:last-child,
+    tr th:last-child {
+      border-right: 1px solid var(--global-border-color);
+    }
 
-  table thead td,
-  table thead th {
-    border-top: 1px solid var(--global-border-color);
-  }
+    thead td,
+    thead th {
+      border-top: 1px solid var(--global-border-color);
+    }
 
-  /* top-left border */
+    /* top-left border */
 
-  table thead tr:first-child th:first-child {
-    border-top-left-radius: var(--panels-border-radius);
-  }
+    thead tr:first-child th:first-child {
+      border-top-left-radius: var(--panels-border-radius);
+    }
 
-  /* top-right border */
+    /* top-right border */
 
-  table thead tr:first-child th:last-child {
-    border-top-right-radius: var(--panels-border-radius);
-    border-top: 1px solid var(--global-border-color);
-  }
+    thead tr:first-child th:last-child {
+      border-top-right-radius: var(--panels-border-radius);
+      border-top: 1px solid var(--global-border-color);
+    }
 
-  /* bottom-left border */
+    /* bottom-left border */
 
-  table tbody tr:last-child td:first-child {
-    border-bottom-left-radius: var(--panels-border-radius);
-  }
+    tbody tr:last-child td:first-child {
+      border-bottom-left-radius: var(--panels-border-radius);
+    }
 
-  /* bottom-right border */
+    /* bottom-right border */
 
-  table tbody tr:last-child td:last-child {
-    border-bottom-right-radius: var(--panels-border-radius);
+    tbody tr:last-child td:last-child {
+      border-bottom-right-radius: var(--panels-border-radius);
+    }
   }
 `;
 
@@ -123,12 +123,12 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
     max-width: 100%;
   }
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  h1.md,
+  h2.md,
+  h3.md,
+  h4.md,
+  h5.md,
+  h6.md {
     font-weight: var(--h-font-weight);
     font-family: var(--h-font-family);
     position: relative;
@@ -206,9 +206,9 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
     }
   }
 
-  h1 {
+  h1.md {
     ${typography('h1', 'h')};
-    margin: var(--h1-margin-top) var(--h1-margin-bottom);
+    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
     ${headingAnchor()};
 
     &:first-child {
@@ -216,33 +216,33 @@ export const MarkdownWrapper = styled.main.attrs(() => ({
     }
   }
 
-  h2 {
+  h2.md {
     ${typography('h2', 'h')};
-    margin: var(--h2-margin-top) var(--h2-margin-bottom);
+    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
     ${headingAnchor()};
   }
 
-  h3 {
+  h3.md {
     ${typography('h3', 'h')};
-    margin: var(--h3-margin-top) var(--h3-margin-bottom);
+    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
     ${headingAnchor()};
   }
 
-  h4 {
+  h4.md {
     ${typography('h4', 'h')};
-    margin: var(--h4-margin-top) var(--h4-margin-bottom);
+    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
     ${headingAnchor()};
   }
 
-  h5 {
+  h5.md {
     ${typography('h5', 'h')};
-    margin: var(--h5-margin-top) var(--h5-margin-bottom);
+    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
     ${headingAnchor()};
   }
 
-  h6 {
+  h6.md {
     ${typography('h6', 'h')};
-    margin: var(--h6-margin-top) var(--h6-margin-bottom);
+    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
     ${headingAnchor()};
   }
 

package/src/Navbar/Navbar.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { useThemeSettings } from '@portal/hooks';
-import { USER_THEME_ALIAS } from '@portal/constants';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { ResolvedConfigLinks } from '@theme/types/portal';
 import { NavbarMenu } from '@theme/Navbar';
 
@@ -13,7 +13,7 @@ interface NavbarProps {
 }
 
 export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element | null {
-  const settings = useThemeSettings(USER_THEME_ALIAS);
+  const settings = useThemeSettings(DEFAULT_THEME_NAME);
   const searchSettings = settings.search;
   const hideSearch =
     searchSettings?.hide || (searchSettings?.placement && searchSettings?.placement !== 'navbar');

package/src/PageNavigation/NextPageLink.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
 import { useThemeSettings, useSidebarSiblingsData } from '@portal/hooks';
@@ -20,13 +21,17 @@ export function NextPageLink(): JSX.Element {
   const label = themeSettings?.navigation?.nextPageLink?.label || `Next to ${nextPage.label}`;
 
   return (
-    <Button
+    <StyledButton
       variant="outlined"
       size="large"
       to={nextPage.link}
       data-component-name="PageNavigation/NextPageLink"
     >
       {label}
-    </Button>
+    </StyledButton>
   );
 }
+
+const StyledButton = styled(Button)`
+  font-family: var(--font-family-base);
+`;

package/src/PageNavigation/PreviousPageLink.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
 import { useThemeSettings, useSidebarSiblingsData } from '@portal/hooks';
@@ -20,13 +21,17 @@ export function PreviousPageLink(): JSX.Element {
   const label = themeSettings?.navigation?.nextPageLink?.label || `Back to ${prevPage.label}`;
 
   return (
-    <Button
+    <StyledButton
       variant="outlined"
       size="large"
       to={prevPage.link}
       data-component-name="PageNavigation/PreviousPageLink"
     >
       {label}
-    </Button>
+    </StyledButton>
   );
 }
+
+const StyledButton = styled(Button)`
+  font-family: var(--font-family-base);
+`;

package/src/Typography/Typography.ts

@@ -1,21 +1,29 @@
 import styled from 'styled-components';
-import { color, typography as typographySystem, TypographyProps } from 'styled-system';
 
-export const Typography = styled.p.attrs(() => ({
+export interface TypographyProps {
+  color?: string;
+  fontFamily?: string;
+  fontSize?: string;
+  fontStyle?: string;
+  fontWeight?: string;
+  lineHeight?: string;
+  letterSpacing?: string;
+  marginBottom?: string;
+  marginTop?: string;
+  textAlign?: string;
+}
+
+export const Typography = styled.div.attrs(() => ({
   'data-component-name': 'Typography/Typography',
-}))<
-  TypographyProps & {
-    color?: string;
-    mt?: string;
-    mb?: string;
-  }
->`
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  line-height: var(--line-height-base);
-  color: var(--color-content);
-  ${color};
-  margin-top: ${({ mt }) => mt || '1em'};
-  margin-bottom: ${({ mb }) => mb || '1em'};
-  ${typographySystem}
+}))<TypographyProps>`
+  color: ${({ color }) => color || 'var(--color-content)'};
+  font-family: ${({ fontFamily }) => fontFamily || 'var(--font-family-base)'};
+  font-size: ${({ fontSize }) => fontSize || 'var(--font-size-base)'};
+  font-style: ${({ fontStyle }) => fontStyle};
+  font-weight: ${({ fontWeight }) => fontWeight || 'var(--font-weight-regular)'};
+  line-height: ${({ lineHeight }) => lineHeight || 'var(--line-height-base)'};
+  letter-spacing: ${({ letterSpacing }) => letterSpacing};
+  margin-bottom: ${({ marginBottom }) => marginBottom};
+  margin-top: ${({ marginTop }) => marginTop};
+  text-align: ${({ textAlign }) => textAlign};
 `;

package/src/globalStyle.ts

@@ -182,6 +182,10 @@ const typography = css`
 const headingsTypography = css`
   // --h-{css-property-name} is fallback for h1...h6
 
+  * {
+    box-sizing: border-box;
+  }
+
   /**
     * @tokens Typography headings font
     */

package/src/hooks/useActiveSectionId.ts

@@ -1,4 +1,4 @@
-import { Location } from 'history';
+import type { Location } from 'history';
 import { useEffect, useState, useMemo } from 'react';
 import throttle from 'lodash.throttle';
 

package/src/utils/class-names.ts

@@ -0,0 +1,8 @@
+const SPACE_DELIMITER = ' ';
+
+export function concatClassNames(...args: Array<string | undefined>): string {
+  return args
+    .map((className) => (className ? className.trim() : className))
+    .filter(Boolean)
+    .join(SPACE_DELIMITER);
+}

package/src/utils/index.ts

@@ -4,3 +4,4 @@ export * from './highlight';
 export * from './jsonToHtml';
 export * from './media-css';
 export * from './theme-helpers';
+export * from './class-names';

package/utils/class-names.d.ts

@@ -0,0 +1 @@
+export declare function concatClassNames(...args: Array<string | undefined>): string;

package/utils/class-names.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.concatClassNames = void 0;
+var SPACE_DELIMITER = ' ';
+function concatClassNames() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return args
+        .map(function (className) { return (className ? className.trim() : className); })
+        .filter(Boolean)
+        .join(SPACE_DELIMITER);
+}
+exports.concatClassNames = concatClassNames;

package/utils/index.d.ts

@@ -4,3 +4,4 @@ export * from './highlight';
 export * from './jsonToHtml';
 export * from './media-css';
 export * from './theme-helpers';
+export * from './class-names';

package/utils/index.js

@@ -20,3 +20,4 @@ __exportStar(require("./highlight"), exports);
 __exportStar(require("./jsonToHtml"), exports);
 __exportStar(require("./media-css"), exports);
 __exportStar(require("./theme-helpers"), exports);
+__exportStar(require("./class-names"), exports);