@redocly/theme 0.4.1 → 0.4.4

package/icons/AlertIcon/AlertIcon.js

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

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Button';
 export * from './CopyButton';
+export * from './EditPageButton';
 export * from './JsonViewer';
 export * from './Typography';
 export * from './SidebarLogo';

package/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Button"), exports);
 __exportStar(require("./CopyButton"), exports);
+__exportStar(require("./EditPageButton"), exports);
 __exportStar(require("./JsonViewer"), exports);
 __exportStar(require("./Typography"), exports);
 __exportStar(require("./SidebarLogo"), exports);

package/mocks/utils.d.ts

@@ -1 +1,2 @@
 export declare function withPathPrefix(link: string): string;
+export declare function timeAgo(lastModified: string | Date): string;

package/mocks/utils.js

@@ -1,7 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withPathPrefix = void 0;
+exports.timeAgo = exports.withPathPrefix = void 0;
 function withPathPrefix(link) {
     return link;
 }
 exports.withPathPrefix = withPathPrefix;
+function timeAgo(lastModified) {
+    // should return format(lastModified) in new-hope
+    var d = new Date(lastModified);
+    return "".concat(d.getDate(), "-").concat(d.getMonth() + 1, "-").concat(d.getFullYear());
+}
+exports.timeAgo = timeAgo;

package/package.json

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

package/src/EditPageButton/EditPageButton.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Link } from '@portal/Link';
+
+export interface EditPageButtonProps {
+  text: string;
+  to: string;
+  icon: string;
+}
+
+export const EditPageButton = ({ text, to, icon }: EditPageButtonProps): JSX.Element => {
+  return (
+    <EditButton to={to}>
+      <ButtonIcon src={icon} />
+      <ButtonText>{text}</ButtonText>
+    </EditButton>
+  );
+};
+
+const EditButton = styled(Link)`
+  margin-left: auto;
+  display: inline-flex;
+  color: var(--color-content);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-base);
+  font-family: var(--font-family-base);
+  text-decoration: none;
+`;
+
+const ButtonIcon = styled.img`
+  height: 14px;
+  padding-right: 3px;
+`;
+
+const ButtonText = styled.span`
+  line-height: 14px;
+`;

package/src/EditPageButton/index.ts

@@ -0,0 +1 @@
+export * from '@theme/EditPageButton/EditPageButton';

package/src/LastUpdated/LastUpdated.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useThemeSettings } from '@portal/hooks';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
+// import { timeAgo } from '@portal/utils';
+
+// TODO: use timeago.js instead
+// import { format } from 'timeago.js';
+// Last updated ${format(lastModified)}
+function timeAgo(date: string | Date) {
+  const d = new Date(date);
+  return `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`;
+}
+
+export interface LastUpdatedProps {
+  lastModified: string | Date;
+}
+
+export function LastUpdated({ lastModified }: LastUpdatedProps): JSX.Element | null {
+  const { lastUpdatedBlock } = useThemeSettings(DEFAULT_THEME_NAME);
+
+  if (lastUpdatedBlock?.hide) {
+    return null;
+  }
+
+  return (
+    <Wrapper data-component-name="LastUpdated/LastUpdated">
+      Last updated {timeAgo(lastModified)}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  color: var(--last-updated-text-color);
+  font-size: var(--last-updated-font-size);
+  font-family: var(--last-updated-font-family);
+  line-height: var(--last-updated-line-height);
+  padding-bottom: 30px;
+`;

package/src/Markdown/Admonition.tsx

@@ -7,7 +7,7 @@ interface AdmonitionTypeProps {
   type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
 }
 
-interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
+export interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
   name?: string;
 }
 

package/src/Markdown/MarkdownLayout.tsx

@@ -1,14 +1,23 @@
 import React from 'react';
+import styled from 'styled-components';
 
 import { PageWrapper } from '@theme/Markdown/PageWrapper';
 import { ContainerWrapper } from '@theme/Markdown/ContainerWrapper';
 import { PageNavigation } from '@theme/PageNavigation/PageNavigation';
+import { EditPageButton } from '@theme/EditPageButton';
+import { LastUpdated } from '@theme/LastUpdated/LastUpdated';
 
 type MarkdownLayoutProps = {
   tableOfContent: React.ReactNode;
   markdownWrapper: React.ReactNode;
   showPrevButton?: boolean;
   showNextButton?: boolean;
+  editPage?: {
+    to: string;
+    text: string;
+    icon: string;
+  };
+  lastModified?: string | Date;
 };
 
 export function MarkdownLayout({
@@ -16,10 +25,18 @@ export function MarkdownLayout({
   markdownWrapper,
   showPrevButton,
   showNextButton,
+  editPage,
+  lastModified,
 }: MarkdownLayoutProps): JSX.Element {
   return (
     <PageWrapper data-component-name="Markdown/MarkdownLayout">
       <ContainerWrapper withToc={true}>
+        <LayoutTop>
+          {lastModified && <LastUpdated lastModified={lastModified} />}
+          {editPage && (
+            <EditPageButton text={editPage.text} to={editPage.to} icon={editPage.icon} />
+          )}
+        </LayoutTop>
         {markdownWrapper}
         <PageNavigation showPrevButton={showPrevButton} showNextButton={showNextButton} />
       </ContainerWrapper>
@@ -27,3 +44,9 @@ export function MarkdownLayout({
     </PageWrapper>
   );
 }
+
+const LayoutTop = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+`;

package/src/Markdown/MarkdownWrapper.tsx

@@ -92,6 +92,11 @@ export function headingAnchor(className = 'anchor'): FlattenSimpleInterpolation
     .${className} svg {
       fill: var(--heading-anchor-color);
       visibility: hidden;
+
+      background-image: var(--heading-anchor-icon);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
     }
 
     :hover .${className} svg,

package/src/Panel/PanelComponent.tsx

@@ -15,6 +15,7 @@ import { PanelHeaderTitle } from '@theme/Panel/PanelHeaderTitle';
 export interface PanelComponentProps {
   expanded?: boolean;
   className?: string;
+  renderChildrenHidden?: boolean;
   header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
   onToggle?: (expanded: boolean) => void;
   description?: React.ReactNode;
@@ -22,6 +23,7 @@ export interface PanelComponentProps {
 
 export function PanelComponent({
   expanded = true,
+  renderChildrenHidden = false,
   header,
   className,
   children,
@@ -61,7 +63,7 @@ export function PanelComponent({
           </PanelHeader>
         ))}
 
-      {isExpanded && (
+      {(isExpanded || renderChildrenHidden) && (
         <PanelBody data-cy="panel-body" hidden={!isExpanded} animate={animate}>
           {children}
         </PanelBody>

package/src/Sidebar/ArrowBack.tsx

@@ -18,5 +18,11 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
 );
 
 export const ArrowBack = styled(Arrow)`
-  fill: var(--sidebar-group-item-chevron-color);
+  fill: var(--sidebar-back-button-icon-color);
+  margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
+
+  background-image: var(--sidebar-back-button-icon);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
 `;

package/src/Sidebar/BackButton.tsx

@@ -37,11 +37,6 @@ const Button = styled.button`
   text-align: left;
   margin: var(--sidebar-back-button-margin);
 
-  svg {
-    margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
-    fill: var(--sidebar-back-button-icon-color);
-  }
-
   &:hover {
     color: var(--sidebar-back-button-hover-text-color);
     background: var(--sidebar-back-button-hover-background-color);

package/src/Sidebar/MobileSidebarButton.tsx

@@ -3,7 +3,9 @@ import styled from 'styled-components';
 export const MobileSidebarButton = styled.span.attrs(() => ({
   'data-component-name': 'Sidebar/MobileSidebarButton',
 }))<{ opened?: boolean }>`
-  background-color: var(--color-primary-500);
+  background-color: var(
+    ${(props) => (props.opened ? '--fab-active-background' : '--fab-background-color')}
+  );
   width: 55px;
   user-select: none;
   height: 55px;
@@ -12,33 +14,28 @@ export const MobileSidebarButton = styled.span.attrs(() => ({
   position: fixed;
   right: 20px;
   z-index: 3;
-  box-shadow: rgba(0, 0, 0, 0.3) 0 0 20px;
+  box-shadow: ${(props) =>
+    props.opened ? 'var(--fab-active-box-shadow)' : 'var(--fab-box-shadow)'};
   border-radius: 50%;
   transform: ${(props) => (props.opened ? 'rotate(180deg)' : 'rotate(0deg)')};
   transition: transform 0.75s;
 
-  ${({ theme }) => theme.mediaQueries.medium} {
+  background-image: var(--fab-icon);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 45%;
+
+  &:hover {
+    background-color: var(--fab-background-color);
+    box-shadow: var(--fab-hover-box-shadow);
+  }
+
+  ${({ theme }) => theme.mediaQueries?.medium} {
     display: none;
     transform: rotate(180deg);
   }
 
-  ${({ theme }) => theme.mediaQueries.print} {
+  ${({ theme }) => theme.mediaQueries?.print} {
     display: none !important;
   }
-
-  :after {
-    content: '';
-    display: inline-block;
-    position: absolute;
-    transform: translate(-50%, -50%);
-    top: 50%;
-    left: 50%;
-    width: 25px;
-    height: 25px;
-    background-color: #fff;
-    -webkit-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A")
-      no-repeat 50% 50%;
-    mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A")
-      no-repeat 50% 50%;
-  }
 `;

package/src/globalStyle.ts

@@ -1,12 +1,14 @@
 import { createGlobalStyle, css } from 'styled-components';
 
+import { darkMode } from './ui/darkColors';
+
 const baseColors = css`
   /* === Palette === */
 
   /**
-    * @tokens Base Colors
-    * @presenter Color
-    */
+      * @tokens Base Colors
+      * @presenter Color
+      */
 
   --color-primary-50: #87ceeb;
   --color-primary-100: #62a1ff;
@@ -85,22 +87,7 @@ const baseColors = css`
   --color-error-800: #ff1414;
   --color-error-900: #ff0000;
 
-  // @tokens End
-`;
-const baseDarkColors = css`
-  /**
-  * @tokens Base Dark Colors
-  * @presenter Color
-  */
-  --color-primary-100: #969ca6;
-  --color-primary-200: #7f8693;
-  --color-primary-300: #7d7d80;
-  --color-primary-400: #4b4f56;
-  --color-primary-500: #404042;
-  --color-primary-600: #36383d;
-  --color-primary-700: #28282a;
-  --color-primary-800: #202021;
-  --color-primary-900: #000000;
+  --colors-translucent: rgb(226 230 236 / 37%);
 
   // @tokens End
 `;
@@ -193,7 +180,7 @@ const headingsTypography = css`
 
   --heading-anchor-offset-right: 4px; // @presenter Spacing
   --heading-anchor-color: var(--color-primary-500); // @presenter Color
-  /*--heading-anchor-icon: icons later */
+  --heading-anchor-icon: none;
 
   // TODO: implement a theme setting for heading-anchor-location: left right
 
@@ -295,8 +282,8 @@ const common = css`
     */
   --border-color: var(--color-secondary-300);
   --border-color-secondary: var(--color-emphasis-600);
-  --background-color: transparent;
-
+  --background-color: var(--color-secondary-50);
+  --box-shadow: 0px 0px 20px 0px var(--color-secondary-500);
   /**
     * @tokens Spacings
     * @presenter Spacing
@@ -425,7 +412,7 @@ const sidebar = css`
     * @tokens Sidebar colors
     * @presenter Color
     */
-  --sidebar-background-color: #fff;
+  --sidebar-background-color: var(--background-color);
   --sidebar-border-color: var(--border-color);
 
   /**
@@ -453,10 +440,14 @@ const sidebar = css`
     *  @presenter Color
     */
   --sidebar-item-text-color: var(--text-color);
-  --sidebar-item-active-color: var(--text-color);
   --sidebar-item-background-color: transparent;
+
+  --sidebar-item-active-color: var(--text-color);
   --sidebar-item-active-background-color: var(--border-color);
 
+  --sidebar-item-hover-background-color: var(--border-color);
+  --sidebar-item-hover-color: var(--text-color);
+ 
   /**
     * @tokens Sidebar item spacing
     * @presenter Spacing
@@ -535,8 +526,8 @@ const sidebar = css`
   --sidebar-back-button-hover-background-color: transparent;
   --sidebar-back-button-icon-color: var(--sidebar-item-text-color);
   --sidebar-back-button-margin: 0 0 calc(var(--sidebar-spacing-unit) * 3) 0;
-
-  //--sidebar-back-button-icon: <svg string or url>
+  --sidebar-back-button-icon: none;
+  
   //--sidebar-version-dropdown-* (input settings, see below)
   // @tokens End
 `;
@@ -589,13 +580,14 @@ const admonition = css`
   --admonition-info-border-width: var(--admonition-border-width);
   --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)
     var(--admonition-info-border-color); // @presenter Border
-  /* --admonition-info-icon: figure this out latter */
+  --admonition-info-icon: none;
 
   /**
   * @tokens Admonition type attention
+  * @presenter Color
   */
 
-  --admonition-attention-background-color: var(--color-accent-50); // @presenter Color
+  --admonition-attention-background-color: var(--color-accent-50); // @presenter Color 
   --admonition-attention-text-color: var(--text-color); // @presenter Color
   --admonition-attention-heading-text-color: var(--text-color); // @presenter Color
   --admonition-attention-icon-color: var(--color-accent-900); // @presenter Color
@@ -604,7 +596,7 @@ const admonition = css`
   --admonition-attention-border-width: var(--admonition-border-width);
   --admonition-attention-border: var(--admonition-attention-border-width)
     var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border
-  /* --admonition-attention-icon: figure this out latter */
+  --admonition-attention-icon: none;
 
   /**
   * @tokens Admonition type warning
@@ -620,7 +612,7 @@ const admonition = css`
   --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-warning-border: var(--admonition-warning-border-width)
     var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border
-  /* --admonition-warning-icon: figure this out latter */
+  --admonition-warning-icon: none;
 
   /**
   * @tokens Admonition type danger
@@ -635,7 +627,7 @@ const admonition = css`
   --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-danger-border: var(--admonition-danger-border-width)
     var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border
-  /* --admonition-danger-icon: figure this out latter */
+  --admonition-danger-icon: none;
 
   /**
   * @tokens Admonition type success
@@ -649,7 +641,7 @@ const admonition = css`
   --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
   --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
-  /* --admonition-success-icon: figure this out latter */
+  --admonition-success-icon: none;
 
   // @tokens End
 `;
@@ -779,7 +771,7 @@ const apiReferencePanels = css`
   --panel-schemas-font-family: var(--panel-font-family); // @presenter FontFamily
   --panel-schemas-font-size: var(--panel-font-size); // @presenter FontSize
   --panel-schemas-font-weight: var(--panel-font-weight); // @presenter
-  --panel-schemas-background-color: var(--color-emphasis-50); // @presenter Color
+  --panel-schemas-background-color: var(--background-color); // @presenter Color
   --panel-schemas-border: var(--panel-border); // @presenter Border
   --panel-schemas-chevron-icon-color: var(--text-color); // @presenter Color
 
@@ -792,7 +784,7 @@ const apiReferencePanels = css`
   --panel-schemas-body-font-size: var(--panel-body-font-size); // @presenter FontSize
   --panel-schemas-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight
   --panel-schemas-body-padding: 0 var(--panel-body-padding) var(--panel-body-padding) var(--panel-body-padding);
-  --panel-schemas-body-background-color: var(--color-emphasis-50); // @presenter Color
+  --panel-schemas-body-background-color: var(--background-color); // @presenter Color
   --panel-schemas-body-border: unset; // @presenter Border
 
   /**
@@ -805,7 +797,7 @@ const apiReferencePanels = css`
   --panel-schemas-heading-font-weight: var(--panel-heading-font-weight); // @presenter FontWeight
   --panel-schemas-heading-line-height: var(--panel-heading-line-height); // @presenter LineHeight
   --panel-schemas-heading-padding: var(--panel-heading-padding);
-  --panel-schemas-heading-background-color: var(--color-emphasis-50); // @presenter Color
+  --panel-schemas-heading-background-color: var(--background-color); // @presenter Color
   --panel-schemas-heading-border: unset; // @presenter Border
 
   /**
@@ -848,7 +840,7 @@ const apiReferencePanels = css`
   * @tokens Panel samples common
   */
 
-  --panel-samples-block-background-color: var(--color-emphasis-50); // @presenter Color
+  --panel-samples-block-background-color: var(--background-color); // @presenter Color
   --panel-samples-width: 50%;
 
   --panel-samples-text-color: var(--text-color-inverse); // @presenter Color
@@ -1171,7 +1163,7 @@ const tooltip = css`
     */
 
   --copy-button-tooltip-text-color: #000;
-  --copy-button-tooltip-background-color: var(--color-secondary-50);
+  --copy-button-tooltip-background-color: var(--background-color);
 
   .tooltip-copy-button {
     --tooltip-text-color: var(--copy-button-tooltip-text-color);
@@ -1197,7 +1189,7 @@ const code = css`
   --inline-code-font-size: var(--code-font-size); // @presenter FontSize
   --inline-code-font-family: var(--code-font-family); // @presenter FontFamily
   --inline-code-text-color: #e53935; // @presenter Color
-  --inline-code-background-color: var(--color-secondary-100); // @presenter Color
+  --inline-code-background-color: var(--colors-translucent); // @presenter Color
   --inline-code-border-color: var(--border-color); // @presenter Color
   --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius
 
@@ -1346,7 +1338,7 @@ const apiReferenceDocs = css`
   --schema-inline-code-font-family: var(--inline-code-font-family); // @presenter FontFamily
   --schema-inline-code-font-size: var(--inline-code-font-size); // @presenter FontSize
   --schema-inline-code-text-color: var(--text-color); // @presenter Color
-  --schema-inline-background-color: var(--color-secondary-100); // @presenter Color
+  --schema-inline-background-color: var(--colors-translucent); // @presenter Color
   --schema-inline-border-color: var(--border-color); // @presenter Color
   --schema-inline-border: 1px solid var(--schema-inline-border-color); // @presenter Border
 
@@ -1408,7 +1400,7 @@ const apiReferenceDocs = css`
   */
 
   --schema-nested-offset: 1em; // @presenter Spacing
-  --schema-nested-background-color: var(--color-secondary-100); // @presenter Color
+  --schema-nested-background-color: var(--colors-translucent); // @presenter Color
 
   /**
   * @tokens API Reference Schema Buttons
@@ -1439,6 +1431,8 @@ const apiReferenceDocs = css`
   --schemas-property-name-font-size: var(--code-font-size); // @presenter FontSize
   --schemas-property-name-font-family: var(--code-font-family); // @presenter FontFamily
 
+  --schemas-property-deprecated-text-color: var(--text-color); // @presenter Color
+
   --schema-property-labels-font-size: var(--schema-labels-font-size); // @presenter FontSize
   --schema-property-required-label-text-color: var(--color-error-900); // @presenter Color
   --schema-property-additional-label-text-color: var(--text-color-secondary); // @presenter Color
@@ -1454,7 +1448,7 @@ const apiReferenceDocs = css`
   --schema-chevron-size: 9px;
 
   --schema-property-deep-link-icon-color: var(--color-primary-500); // @presenter Color
-  /* --schema-property-deep-link-icon: figure out this later */
+  --schema-property-deep-link-icon: none;
 
   /*
     * @tokens API Reference Other
@@ -1464,19 +1458,16 @@ const apiReferenceDocs = css`
   --linear-progress-color: var(--color-accent-500); // @presenter Color
   --linear-progress-background-color: var(--color-accent-100); // @presenter Color
 
-  --fab-icon-color: var(--color-primary-500); // @presenter Color
-  --fab-background-color: var(--color-emphasis-50); // @presenter Color
-  --fab-box-shadow: 0 0 20px rgba(43, 43, 43, 0.3); // @presenter Shadow
+  --fab-background-color: var(--color-primary-500); // @presenter Color
+  --fab-box-shadow: var(--box-shadow); // @presenter Shadow
 
-  --fab-hover-background: var(--color-emphasis-200); // @presenter Color
-  --fab-hover-icon-color: var(--color-primary-600); // @presenter Color
-  --fab-hover-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // @presenter Shadow
+  --fab-hover-background: var(--color-primary-500); // @presenter Color
+  --fab-hover-box-shadow: var(--box-shadow); // @presenter Shadow
 
-  --fab-active-background: var(--color-emphasis-200); // @presenter Color
-  --fab-active-icon-color: var(--color-primary-600); // @presenter Color
-  --fab-active-box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); // @presenter Shadow
+  --fab-active-background: var(--color-primary-500); // @presenter Color
+  --fab-active-box-shadow: var(--box-shadow); // @presenter Shadow
 
-  /* --fab-icon: <svg string or url> work with icons later **/
+  --fab-icon: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 294.842 294.842' style='enable-background:new 0 0 294.842 294.842;' xml:space='preserve'%3E%3Cg%3E%3Cpath fill='%23fff' d='M292.128,214.846c-2.342-2.344-6.143-2.344-8.484,0l-59.512,59.511V6c0-3.313-2.687-6-6-6s-6,2.687-6,6v268.356 l-59.513-59.512c-2.342-2.342-6.142-2.343-8.485,0.001c-2.343,2.343-2.343,6.142,0.001,8.485l69.755,69.754 c1.171,1.171,2.707,1.757,4.242,1.757s3.071-0.586,4.242-1.758l69.754-69.754C294.472,220.987,294.472,217.188,292.128,214.846z'/%3E%3Cpath fill='%23fff' d='M6.956,12h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,12,6.956,12z'/%3E%3Cpath fill='%23fff' d='M6.956,82.228h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,82.228,6.956,82.228z'/%3E%3Cpath fill='%23fff' d='M6.956,152.456h180.137c3.313,0,6-2.687,6-6s-2.687-6-6-6H6.956c-3.313,0-6,2.687-6,6S3.643,152.456,6.956,152.456z'/%3E%3Cpath fill='%23fff' d='M124.438,210.685H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,210.685,124.438,210.685z' /%3E%3Cpath fill='%23fff' d='M124.438,280.912H6.956c-3.313,0-6,2.687-6,6s2.687,6,6,6h117.482c3.313,0,6-2.687,6-6S127.752,280.912,124.438,280.912z' /%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
 
   // @tokens End
 `;
@@ -1580,7 +1571,7 @@ const navbar = css`
   --navbar-height: 60px; // @presenter Spacing
   --navbar-text-color: #fff; // @presenter Color
   --navbar-background-color: var(--color-primary-500); // @presenter Color
-  --navbar-container-max-width: 1200px;
+  --navbar-container-max-width: 100%;
 
   /**
     * @tokens Navbar Item
@@ -1785,7 +1776,7 @@ const search = css`
   --search-input-hover-border: none; // @presenter Color
   --search-input-placeholder-color: var(--search-input-text-color);
 
-  --search-popover-background-color: #fff; // @presenter Color
+  --search-popover-background-color: var(--background-color); // @presenter Color
   --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius
   --search-popover-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
     0 8px 10px -5px rgba(0, 0, 0, 0.4); // @presenter BoxShadow
@@ -1820,7 +1811,7 @@ const search = css`
     * @presenter Color
     */
 
-  --search-modal-background: #fff;
+  --search-modal-background: var(--background-color);
   --search-modal-text-color: var(--text-color);
   --search-modal-border: none;
   --search-modal-box-shadow: none;
@@ -1846,8 +1837,11 @@ const dropdown = css`
   --dropdown-border: none;
 `;
 
-export const darkMode = css`
-  ${baseDarkColors}
+const lastUpdated = css`
+  --last-updated-text-color: var(--text-color);
+  --last-updated-font-size: var(--font-size-small);
+  --last-updated-font-family: var(--font-family-base);
+  --last-updated-line-height: var(--line-height-base);
 `;
 
 export const styles = css`
@@ -1875,6 +1869,7 @@ export const styles = css`
     ${dropdown}
     ${apiReferencePanels}
     ${apiReferenceDocs}
+    ${lastUpdated}
   }
 
   :root.dark {

package/src/icons/AlertIcon/AlertIcon.tsx

@@ -108,4 +108,9 @@ export const AlertIcon = styled(Icon).attrs(() => ({
   flex-shrink: 0;
 
   fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};
+
+  background-image: ${({ type }) => `var(--admonition-${type}-icon)`};
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
 `;