Replace current theme components with @swmansion/t-rex-ui

docs/package.json

@@ -29,7 +29,7 @@
     "@emotion/styled": "^11.10.6",
     "@mdx-js/react": "^1.6.22",
     "@mui/material": "^5.12.0",
-    "@swmansion/t-rex-ui": "^0.0.3",
+    "@swmansion/t-rex-ui": "^0.0.9",
     "@vercel/og": "^0.6.2",
     "babel-polyfill": "^6.26.0",
     "babel-preset-expo": "^9.2.2",

docs/src/css/colors.css

@@ -114,9 +114,9 @@
   --swm-color-mode-enabled: var(--swm-navy-light-20);
   --swm-color-mode-disabled-color: var(--swm-navy-light-20);
 
-  --swm-color-mode-enabled-landing: var(--swm-off-white);
-  --swm-color-mode-enabled-color-landing: var(--ifm-font-color-base);
-  --swm-color-mode-disabled-color-landing: var(--swm-off-white);
+  --swm-color-mode-enabled-landing: var(--ifm-font-color-base);
+  --swm-color-mode-enabled-color-landing: var(--swm-off-white);
+  --swm-color-mode-disabled-color-landing: var(--ifm-font-color-base);
 
   /* Typography */
   --ifm-heading-color: var(--ifm-color-primary);
@@ -211,6 +211,8 @@
   --swm-search-hit-border-hover: var(--swm-blue-light-100);
   --swm-search-hit-active-color: var(--swm-off-white);
 
+  --swm-docsearch-hit-source-color: var(--swm-navy-light-100);
+
   --swm-search-hit-results-color: var(--swm-navy-light-40);
 
   --swm-search-page-query-text-color: var(--swm-navy-light-100);
@@ -375,6 +377,8 @@
   --swm-search-hit-border-hover: var(--swm-blue-dark-40);
   --swm-search-hit-active-color: var(--swm-navy-light-100);
 
+  --swm-docsearch-hit-source-color: var(--swm-navy-light-10);
+
   --swm-search-hit-results-color: var(--swm-navy-light-20);
 
   --swm-search-page-query-text-color: var(--swm-navy-light-10);

docs/src/css/overrides.css

@@ -1,6 +1,8 @@
 :root {
   --swm-expandable-transition: transform 200ms ease;
   --ifm-code-font-size: 14px;
+  --swm-logo-title-width: 177px;
+  --swm-logo-height: 50px !important;
 }
 
 [class*='plugin-pages'] {
@@ -129,3 +131,12 @@ table thead tr {
     -webkit-text-size-adjust: 100%;
   }
 }
+
+[class*='navbar__link']:not([class*='header-github']):not([role='button']) {
+  display: none;
+}
+
+/* Remove in @swmansion-t-rex-ui 0.0.10 patch */
+button[class*='DocSearch-Button'] {
+  margin: 0 !important;
+}

docs/src/theme/Admonition/index.js

@@ -1,141 +1,3 @@
-import React from 'react';
-import clsx from 'clsx';
-import { ThemeClassNames } from '@docusaurus/theme-common';
-import Translate from '@docusaurus/Translate';
-import ThemedImage from '@theme/ThemedImage';
-import styles from './styles.module.css';
-import useBaseUrl from '@docusaurus/useBaseUrl';
+import { Admonition } from '@swmansion/t-rex-ui';
 
-const AdmonitionConfigs = {
-  note: {
-    infimaClassName: 'secondary',
-    label: (
-      <Translate
-        id="theme.admonition.note"
-        description="The default label used for the Note admonition (:::note)">
-        note
-      </Translate>
-    ),
-  },
-  tip: {
-    infimaClassName: 'success',
-    label: (
-      <Translate
-        id="theme.admonition.tip"
-        description="The default label used for the Tip admonition (:::tip)">
-        tip
-      </Translate>
-    ),
-  },
-  danger: {
-    infimaClassName: 'danger',
-    label: (
-      <Translate
-        id="theme.admonition.danger"
-        description="The default label used for the Danger admonition (:::danger)">
-        danger
-      </Translate>
-    ),
-  },
-  info: {
-    infimaClassName: 'info',
-    label: (
-      <Translate
-        id="theme.admonition.info"
-        description="The default label used for the Info admonition (:::info)">
-        info
-      </Translate>
-    ),
-  },
-  caution: {
-    infimaClassName: 'caution',
-    label: (
-      <Translate
-        id="theme.admonition.caution"
-        description="The default label used for the Caution admonition (:::caution)">
-        caution
-      </Translate>
-    ),
-  },
-};
-// Legacy aliases, undocumented but kept for retro-compatibility
-const aliases = {
-  secondary: 'note',
-  important: 'info',
-  success: 'tip',
-  warning: 'danger',
-};
-
-export default function Admonition(props) {
-  const {
-    children,
-    type,
-    title,
-    icon: iconProp,
-  } = processAdmonitionProps(props);
-  const typeConfig = getAdmonitionConfig(type);
-  const titleLabel = title ?? typeConfig.label;
-
-  const dangerIcon = {
-    light: useBaseUrl('/img/danger.svg'),
-    dark: useBaseUrl('/img/danger-dark.svg'),
-  };
-
-  return (
-    <div
-      className={clsx(
-        ThemeClassNames.common.admonition,
-        ThemeClassNames.common.admonitionType(props.type),
-        styles.admonition,
-        'alert',
-        styles[`alert--${typeConfig.infimaClassName}`]
-      )}>
-      <div className={styles.admonitionHeading}>
-        <div className={styles.admonitionIcon}>
-          <ThemedImage sources={dangerIcon} />
-        </div>
-
-        {titleLabel}
-      </div>
-      <div className={styles.admonitionContent}>{children}</div>
-    </div>
-  );
-
-  function getAdmonitionConfig(unsafeType) {
-    const type = aliases[unsafeType] ?? unsafeType;
-    const config = AdmonitionConfigs[type];
-    if (config) {
-      return config;
-    }
-    console.warn(
-      `No admonition config found for admonition type "${type}". Using Info as fallback.`
-    );
-    return AdmonitionConfigs.info;
-  }
-}
-
-// Workaround because it's difficult in MDX v1 to provide a MDX title as props
-// See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682
-function extractMDXAdmonitionTitle(children) {
-  const items = React.Children.toArray(children);
-  const mdxAdmonitionTitle = items.find(
-    (item) =>
-      React.isValidElement(item) && item.props?.mdxType === 'mdxAdmonitionTitle'
-  );
-  const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>;
-  return {
-    mdxAdmonitionTitle,
-    rest,
-  };
-}
-
-function processAdmonitionProps(props) {
-  const { mdxAdmonitionTitle, rest } = extractMDXAdmonitionTitle(
-    props.children
-  );
-  return {
-    ...props,
-    title: props.title ?? mdxAdmonitionTitle,
-    children: rest,
-  };
-}
+export default Admonition;