fix: render READMEs with correct font and highlighting (#4494)

2024-12-30 22:34:10 -05:00 · 2024-02-11 18:05:48 +01:00 · 2024-02-11 18:05:48 +01:00 · 3323599268
commit 3323599268
parent d4d137f664
14 changed files with 1066 additions and 1416 deletions
--- a/.changeset/strange-points-repair.md
+++ b/.changeset/strange-points-repair.md
@ -0,0 +1,6 @@
+---
+'@verdaccio/ui-theme': patch
+'@verdaccio/ui-components': patch
+---
+
+fix: render READMEs with correct font and highlighting
--- a/packages/plugins/ui-theme/tools/webpack.config.js
+++ b/packages/plugins/ui-theme/tools/webpack.config.js
@ -59,16 +59,7 @@ module.exports = {
      },
      {
        test: /\.css$/i,
-        use: [
-          'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              importLoaders: 1,
-              modules: true,
-            },
-          },
-        ],
+        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.md$/,
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@ -31,7 +31,6 @@
    "@rematch/core": "2.2.0",
    "@rematch/loading": "2.1.2",
    "@rematch/persist": "2.1.2",
-    "classnames": "2.5.1",
    "country-flag-icons": "1.5.9",
    "dayjs": "1.11.10",
    "dompurify": "3.0.8",
--- a/packages/ui-components/src/Theme/theme.ts
+++ b/packages/ui-components/src/Theme/theme.ts
@ -25,7 +25,7 @@ const colors = {
  nobel02: '#9f9f9f',
  primary: PRIMARY_COLOR,
  secondary: '#20232a',
-  background: '#fff',
+  background: '#f4f4f4',
  dodgerBlue: '#1ba1f2',
  cyanBlue: '#253341',
 };
@ -114,6 +114,13 @@ export const getTheme = (themeMode: ThemeMode, primaryColor: string) => {
        default: palette.background,
      },
    },
+    // Looks better in darkmode without background opacity
+    // https://mui.com/material-ui/migration/v5-component-changes/#change-dark-mode-background-opacity
+    components: {
+      MuiPaper: {
+        styleOverrides: { root: { backgroundImage: 'unset' } },
+      },
+    },
    ...customizedTheme,
  });
 };
--- a/packages/ui-components/src/components/Developers/snapshots/Developers.test.tsx.snap
+++ b/packages/ui-components/src/components/Developers/snapshots/Developers.test.tsx.snap
@ -57,7 +57,7 @@ exports[`test Developers should render the component for contributors with items
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
-  color: #fff;
+  color: #f4f4f4;
  background-color: #bdbdbd;
 }

@ -181,7 +181,7 @@ exports[`test Developers should render the component for contributors with items
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
-  color: #fff;
+  color: #f4f4f4;
  background-color: #bdbdbd;
 }

@ -360,7 +360,7 @@ exports[`test Developers should render the component for maintainers with items
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
-  color: #fff;
+  color: #f4f4f4;
  background-color: #bdbdbd;
 }

@ -484,7 +484,7 @@ exports[`test Developers should render the component for maintainers with items
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
-  color: #fff;
+  color: #f4f4f4;
  background-color: #bdbdbd;
 }

--- a/packages/ui-components/src/components/NoItems/snapshots/Noitems.test.tsx.snap
+++ b/packages/ui-components/src/components/NoItems/snapshots/Noitems.test.tsx.snap
@ -8,6 +8,7 @@ exports[`<NoItem /> component should load the component in default state 1`] = `
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 4px;
  box-shadow: none;
+  background-image: unset;
  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
--- a/packages/ui-components/src/components/Readme/Readme.tsx
+++ b/packages/ui-components/src/components/Readme/Readme.tsx
@ -1,19 +1,41 @@
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import { useTheme } from '@mui/styles';
 import 'highlight.js/styles/default.css';
 import React from 'react';

 import { useCustomTheme } from '../../';
-import ReadmeDark from './ReadmeDark';
-import ReadmeLight from './ReadmeLight';
+import './github-markdown.css';
 import { Props } from './types';
+import { parseReadme } from './utils';

 const Readme: React.FC<Props> = ({ description }) => {
  // @ts-ignore
  const { isDarkMode } = useCustomTheme();
+  const theme = useTheme();

-  return isDarkMode ? (
-    <ReadmeDark description={description} />
-  ) : (
-    <ReadmeLight description={description} />
+  return (
+    <Card>
+      <CardContent>
+        <Box data-testid="readme" sx={{ margin: theme.spacing(1) }}>
+          <Wrapper
+            className={`markdown-body ${isDarkMode ? 'markdown-dark' : 'markdown-light'}`}
+            dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
+          />
+        </Box>
+      </CardContent>
+    </Card>
  );
 };
 export default Readme;
+
+const Wrapper = styled('div')({
+  ul: {
+    listStyle: 'disc',
+  },
+  img: {
+    maxWidth: '100%',
+  },
+});
--- a/packages/ui-components/src/components/Readme/ReadmeDark.tsx
+++ b/packages/ui-components/src/components/Readme/ReadmeDark.tsx
@ -1,32 +0,0 @@
-import styled from '@emotion/styled';
-import cx from 'classnames';
-import 'highlight.js/styles/default.css';
-import React from 'react';
-
-import { Theme } from '../../Theme';
-// @ts-ignore
-import styles from './github-markdown-dark.css';
-import { Props } from './types';
-import { parseReadme } from './utils';
-
-const Readme: React.FC<Props> = ({ description }) => {
-  return (
-    <Wrapper
-      className={cx('markdown-body', styles['markdown-body'])}
-      dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
-    />
-  );
-};
-export default Readme;
-
-const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
-  background: theme?.palette.white,
-  color: theme?.palette.black,
-  padding: theme?.spacing(2, 3),
-  ul: {
-    listStyle: 'disc',
-  },
-  img: {
-    maxWidth: '100%',
-  },
-}));
--- a/packages/ui-components/src/components/Readme/ReadmeLight.tsx
+++ b/packages/ui-components/src/components/Readme/ReadmeLight.tsx
@ -1,32 +0,0 @@
-import styled from '@emotion/styled';
-import cx from 'classnames';
-import 'highlight.js/styles/default.css';
-import React from 'react';
-
-import { Theme } from '../../Theme';
-// @ts-ignore
-import styles from './github-markdown-light.css';
-import { Props } from './types';
-import { parseReadme } from './utils';
-
-const Readme: React.FC<Props> = ({ description }) => {
-  return (
-    <Wrapper
-      className={cx('markdown-body', styles['markdown-body'])}
-      dangerouslySetInnerHTML={{ __html: parseReadme(description) as string }}
-    />
-  );
-};
-export default Readme;
-
-const Wrapper = styled('div')<{ theme?: Theme }>(({ theme }) => ({
-  background: theme?.palette.white,
-  color: theme?.palette.black,
-  padding: theme?.spacing(2, 3),
-  ul: {
-    listStyle: 'disc',
-  },
-  img: {
-    maxWidth: '100%',
-  },
-}));
--- a/packages/ui-components/src/components/Readme/snapshots/Readme.spec.tsx.snap
+++ b/packages/ui-components/src/components/Readme/snapshots/Readme.spec.tsx.snap
@ -4,55 +4,115 @@ exports[`<Readme /> component should load the component in default state 1`] = `
 {
  "asFragment": [Function],
  "baseElement": .emotion-0 {
-  background: #fff;
-  color: #000;
-  padding: 16px 24px;
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.87);
+  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
+  background-image: unset;
+  overflow: hidden;
 }

-.emotion-0 ul {
+.emotion-1 {
+  padding: 16px;
+}
+
+.emotion-1:last-child {
+  padding-bottom: 24px;
+}
+
+.emotion-2 {
+  margin: 8px;
+}
+
+.emotion-3 ul {
  list-style: disc;
 }

-.emotion-0 img {
+.emotion-3 img {
  max-width: 100%;
 }

 <body>
    <div>
      <div
-        class="markdown-body markdown-body emotion-0 emotion-1"
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root emotion-0"
      >
-        <p>
-          test
-        </p>
+        <div
+          class="MuiCardContent-root emotion-1"
+        >
+          <div
+            class="MuiBox-root emotion-2"
+            data-testid="readme"
+          >
+            <div
+              class="markdown-body markdown-light emotion-3 emotion-4"
+            >
+              <p>
+                test
+              </p>
              

+            </div>
+          </div>
+        </div>
      </div>
    </div>
  </body>,
  "container": .emotion-0 {
-  background: #fff;
-  color: #000;
-  padding: 16px 24px;
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.87);
+  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
+  background-image: unset;
+  overflow: hidden;
 }

-.emotion-0 ul {
+.emotion-1 {
+  padding: 16px;
+}
+
+.emotion-1:last-child {
+  padding-bottom: 24px;
+}
+
+.emotion-2 {
+  margin: 8px;
+}
+
+.emotion-3 ul {
  list-style: disc;
 }

-.emotion-0 img {
+.emotion-3 img {
  max-width: 100%;
 }

 <div>
    <div
-      class="markdown-body markdown-body emotion-0 emotion-1"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root emotion-0"
    >
-      <p>
-        test
-      </p>
+      <div
+        class="MuiCardContent-root emotion-1"
+      >
+        <div
+          class="MuiBox-root emotion-2"
+          data-testid="readme"
+        >
+          <div
+            class="markdown-body markdown-light emotion-3 emotion-4"
+          >
+            <p>
+              test
+            </p>
            

+          </div>
+        </div>
+      </div>
    </div>
  </div>,
  "debug": [Function],
--- a/packages/ui-components/src/components/Readme/github-markdown-light.css
+++ b/packages/ui-components/src/components/Readme/github-markdown-light.css
--- a/packages/ui-components/src/components/Readme/github-markdown-dark.css
+++ b/packages/ui-components/src/components/Readme/github-markdown-dark.css
@ -1,12 +1,126 @@
-/*dark*/
+/* Ensure monospace for combination with highlight.js */
+
+.markdown-body pre code span {
+  font-family: monospace;
+  font-size: 1em;
+}
+
+/* Output from https://github.com/sindresorhus/generate-github-markdown-css without media selectors and transparent background */
+
+.markdown-dark {
+  /*dark*/
+  color-scheme: dark;
+  --color-prettylights-syntax-comment: #8b949e;
+  --color-prettylights-syntax-constant: #79c0ff;
+  --color-prettylights-syntax-entity: #d2a8ff;
+  --color-prettylights-syntax-storage-modifier-import: #c9d1d9;
+  --color-prettylights-syntax-entity-tag: #7ee787;
+  --color-prettylights-syntax-keyword: #ff7b72;
+  --color-prettylights-syntax-string: #a5d6ff;
+  --color-prettylights-syntax-variable: #ffa657;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+  --color-prettylights-syntax-carriage-return-bg: #b62324;
+  --color-prettylights-syntax-string-regexp: #7ee787;
+  --color-prettylights-syntax-markup-list: #f2cc60;
+  --color-prettylights-syntax-markup-heading: #1f6feb;
+  --color-prettylights-syntax-markup-italic: #c9d1d9;
+  --color-prettylights-syntax-markup-bold: #c9d1d9;
+  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+  --color-prettylights-syntax-markup-deleted-bg: #67060c;
+  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+  --color-prettylights-syntax-markup-inserted-bg: #033a16;
+  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+  --color-prettylights-syntax-markup-ignored-text: #c9d1d9;
+  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+  --color-prettylights-syntax-brackethighlighter-angle: #8b949e;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
+  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+  --color-fg-default: #e6edf3;
+  --color-fg-muted: #848d97;
+  --color-fg-subtle: #6e7681;
+  --color-canvas-default: #0d1117; 
+  --color-canvas-subtle: #161b22;
+  --color-border-default: #30363d;
+  --color-border-muted: #21262d;
+  --color-neutral-muted: rgba(110,118,129,0.4);
+  --color-accent-fg: #2f81f7;
+  --color-accent-emphasis: #1f6feb;
+  --color-success-fg: #3fb950;
+  --color-success-emphasis: #238636;
+  --color-attention-fg: #d29922;
+  --color-attention-emphasis: #9e6a03;
+  --color-attention-subtle: rgba(187,128,9,0.15);
+  --color-danger-fg: #f85149;
+  --color-danger-emphasis: #da3633;
+  --color-done-fg: #a371f7;
+  --color-done-emphasis: #8957e5;
+}
+
+.markdown-light {
+  /*light*/
+  color-scheme: light;
+  --color-prettylights-syntax-comment: #57606a;
+  --color-prettylights-syntax-constant: #0550ae;
+  --color-prettylights-syntax-entity: #6639ba;
+  --color-prettylights-syntax-storage-modifier-import: #24292f;
+  --color-prettylights-syntax-entity-tag: #116329;
+  --color-prettylights-syntax-keyword: #cf222e;
+  --color-prettylights-syntax-string: #0a3069;
+  --color-prettylights-syntax-variable: #953800;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
+  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
+  --color-prettylights-syntax-carriage-return-bg: #cf222e;
+  --color-prettylights-syntax-string-regexp: #116329;
+  --color-prettylights-syntax-markup-list: #3b2300;
+  --color-prettylights-syntax-markup-heading: #0550ae;
+  --color-prettylights-syntax-markup-italic: #24292f;
+  --color-prettylights-syntax-markup-bold: #24292f;
+  --color-prettylights-syntax-markup-deleted-text: #82071e;
+  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+  --color-prettylights-syntax-markup-inserted-text: #116329;
+  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+  --color-prettylights-syntax-markup-changed-text: #953800;
+  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+  --color-prettylights-syntax-markup-ignored-text: #eaeef2;
+  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
+  --color-prettylights-syntax-meta-diff-range: #8250df;
+  --color-prettylights-syntax-brackethighlighter-angle: #57606a;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
+  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+  --color-fg-default: #1F2328;
+  --color-fg-muted: #656d76;
+  --color-fg-subtle: #6e7781;
+  --color-canvas-default: #ffffff;
+  --color-canvas-subtle: #f6f8fa;
+  --color-border-default: #d0d7de;
+  --color-border-muted: hsla(210,18%,87%,1);
+  --color-neutral-muted: rgba(175,184,193,0.2);
+  --color-accent-fg: #0969da;
+  --color-accent-emphasis: #0969da;
+  --color-success-fg: #1a7f37;
+  --color-success-emphasis: #1f883d;
+  --color-attention-fg: #9a6700;
+  --color-attention-emphasis: #9a6700;
+  --color-attention-subtle: #fff8c5;
+  --color-danger-fg: #d1242f;
+  --color-danger-emphasis: #cf222e;
+  --color-done-fg: #8250df;
+  --color-done-emphasis: #8250df;
+}

 .markdown-body {
-  color-scheme: dark;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  margin: 0;
-  color: #e6edf3;
-  background-color: #0d1117;
+  color: var(--color-fg-default);
+  background-color: transparent; /* var(--color-canvas-default); */
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.5;
@ -50,7 +164,7 @@

 .markdown-body a {
  background-color: transparent;
-  color: #2f81f7;
+  color: var(--color-accent-fg);
  text-decoration: none;
 }

@ -62,7 +176,7 @@

 .markdown-body b,
 .markdown-body strong {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
 }

 .markdown-body dfn {
@ -71,15 +185,15 @@

 .markdown-body h1 {
  margin: .67em 0;
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
  padding-bottom: .3em;
  font-size: 2em;
-  border-bottom: 1px solid #21262d;
+  border-bottom: 1px solid var(--color-border-muted);
 }

 .markdown-body mark {
-  background-color: rgba(187,128,9,0.15);
-  color: #e6edf3;
+  background-color: var(--color-attention-subtle);
+  color: var(--color-fg-default);
 }

 .markdown-body small {
@ -106,7 +220,7 @@
  border-style: none;
  max-width: 100%;
  box-sizing: content-box;
-  background-color: #0d1117;
+  background-color: var(--color-canvas-default);
 }

 .markdown-body code,
@ -125,11 +239,11 @@
  box-sizing: content-box;
  overflow: hidden;
  background: transparent;
-  border-bottom: 1px solid #21262d;
+  border-bottom: 1px solid var(--color-border-muted);
  height: .25em;
  padding: 0;
  margin: 24px 0;
-  background-color: #30363d;
+  background-color: var(--color-border-default);
  border: 0;
 }

@ -146,6 +260,7 @@
 .markdown-body [type=reset],
 .markdown-body [type=submit] {
  -webkit-appearance: button;
+  appearance: button;
 }

 .markdown-body [type=checkbox],
@ -162,6 +277,7 @@
 .markdown-body [type=search]::-webkit-search-cancel-button,
 .markdown-body [type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
+  appearance: none;
 }

 .markdown-body ::-webkit-input-placeholder {
@ -171,6 +287,7 @@

 .markdown-body ::-webkit-file-upload-button {
  -webkit-appearance: button;
+  appearance: button;
  font: inherit;
 }

@ -179,7 +296,7 @@
 }

 .markdown-body ::placeholder {
-  color: #6e7681;
+  color: var(--color-fg-subtle);
  opacity: 1;
 }

@ -220,7 +337,7 @@
 .markdown-body [role=button]:focus,
 .markdown-body input[type=radio]:focus,
 .markdown-body input[type=checkbox]:focus {
-  outline: 2px solid #2f81f7;
+  outline: 2px solid var(--color-accent-fg);
  outline-offset: -2px;
  box-shadow: none;
 }
@ -236,7 +353,7 @@
 .markdown-body [role=button]:focus-visible,
 .markdown-body input[type=radio]:focus-visible,
 .markdown-body input[type=checkbox]:focus-visible {
-  outline: 2px solid #2f81f7;
+  outline: 2px solid var(--color-accent-fg);
  outline-offset: -2px;
  box-shadow: none;
 }
@ -255,13 +372,13 @@
  padding: 3px 5px;
  font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
  line-height: 10px;
-  color: #e6edf3;
+  color: var(--color-fg-default);
  vertical-align: middle;
-  background-color: #161b22;
-  border: solid 1px rgba(110,118,129,0.4);
-  border-bottom-color: rgba(110,118,129,0.4);
+  background-color: var(--color-canvas-subtle);
+  border: solid 1px var(--color-neutral-muted);
+  border-bottom-color: var(--color-neutral-muted);
  border-radius: 6px;
-  box-shadow: inset 0 -1px 0 rgba(110,118,129,0.4);
+  box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
 }

 .markdown-body h1,
@ -272,36 +389,36 @@
 .markdown-body h6 {
  margin-top: 24px;
  margin-bottom: 16px;
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
  line-height: 1.25;
 }

 .markdown-body h2 {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
  padding-bottom: .3em;
  font-size: 1.5em;
-  border-bottom: 1px solid #21262d;
+  border-bottom: 1px solid var(--color-border-muted);
 }

 .markdown-body h3 {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
  font-size: 1.25em;
 }

 .markdown-body h4 {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
  font-size: 1em;
 }

 .markdown-body h5 {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
  font-size: .875em;
 }

 .markdown-body h6 {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
  font-size: .85em;
-  color: #7d8590;
+  color: var(--color-fg-muted);
 }

 .markdown-body p {
@ -312,8 +429,8 @@
 .markdown-body blockquote {
  margin: 0;
  padding: 0 1em;
-  color: #7d8590;
-  border-left: .25em solid #30363d;
+  color: var(--color-fg-muted);
+  border-left: .25em solid var(--color-border-default);
 }

 .markdown-body ul,
@ -368,6 +485,10 @@
  appearance: none;
 }

+.markdown-body .mr-2 {
+  margin-right: var(--base-size-8, 8px) !important;
+}
+
 .markdown-body::before {
  display: table;
  content: "";
@ -393,7 +514,7 @@
 }

 .markdown-body .absent {
-  color: #f85149;
+  color: var(--color-danger-fg);
 }

 .markdown-body .anchor {
@ -433,7 +554,7 @@
 .markdown-body h4 .octicon-link,
 .markdown-body h5 .octicon-link,
 .markdown-body h6 .octicon-link {
-  color: #e6edf3;
+  color: var(--color-fg-default);
  vertical-align: middle;
  visibility: hidden;
 }
@ -551,7 +672,7 @@
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
 }

 .markdown-body dl dd {
@ -560,13 +681,13 @@
 }

 .markdown-body table th {
-  font-weight: 600;
+  font-weight: var(--base-text-weight-semibold, 600);
 }

 .markdown-body table th,
 .markdown-body table td {
  padding: 6px 13px;
-  border: 1px solid #30363d;
+  border: 1px solid var(--color-border-default);
 }

 .markdown-body table td>:last-child {
@ -574,12 +695,12 @@
 }

 .markdown-body table tr {
-  background-color: #0d1117;
-  border-top: 1px solid #21262d;
+  background-color: var(--color-canvas-default);
+  border-top: 1px solid var(--color-border-muted);
 }

 .markdown-body table tr:nth-child(2n) {
-  background-color: #161b22;
+  background-color: var(--color-canvas-subtle);
 }

 .markdown-body table img {
@ -612,7 +733,7 @@
  padding: 7px;
  margin: 13px 0 0;
  overflow: hidden;
-  border: 1px solid #30363d;
+  border: 1px solid var(--color-border-default);
 }

 .markdown-body span.frame span img {
@ -624,7 +745,7 @@
  display: block;
  padding: 5px 0 0;
  clear: both;
-  color: #e6edf3;
+  color: var(--color-fg-default);
 }

 .markdown-body span.align-center {
@ -694,7 +815,7 @@
  margin: 0;
  font-size: 85%;
  white-space: break-spaces;
-  background-color: rgba(110,118,129,0.4);
+  background-color: var(--color-neutral-muted);
  border-radius: 6px;
 }

@ -739,8 +860,8 @@
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
-  color: #e6edf3;
-  background-color: #161b22;
+  color: var(--color-fg-default);
+  background-color: var(--color-canvas-subtle);
  border-radius: 6px;
 }

@ -770,7 +891,7 @@
 .markdown-body .csv-data .blob-num {
  padding: 10px 8px 9px;
  text-align: right;
-  background: #0d1117;
+  background: var(--color-canvas-default);
  border: 0;
 }

@ -779,8 +900,8 @@
 }

 .markdown-body .csv-data th {
-  font-weight: 600;
-  background: #161b22;
+  font-weight: var(--base-text-weight-semibold, 600);
+  background: var(--color-canvas-subtle);
  border-top: 0;
 }

@ -794,8 +915,8 @@

 .markdown-body .footnotes {
  font-size: 12px;
-  color: #7d8590;
-  border-top: 1px solid #30363d;
+  color: var(--color-fg-muted);
+  border-top: 1px solid var(--color-border-default);
 }

 .markdown-body .footnotes ol {
@ -820,12 +941,12 @@
  left: -24px;
  pointer-events: none;
  content: "";
-  border: 2px solid #1f6feb;
+  border: 2px solid var(--color-accent-emphasis);
  border-radius: 6px;
 }

 .markdown-body .footnotes li:target {
-  color: #e6edf3;
+  color: var(--color-fg-default);
 }

 .markdown-body .footnotes .data-footnote-backref g-emoji {
@ -833,30 +954,30 @@
 }

 .markdown-body .pl-c {
-  color: #8b949e;
+  color: var(--color-prettylights-syntax-comment);
 }

 .markdown-body .pl-c1,
 .markdown-body .pl-s .pl-v {
-  color: #79c0ff;
+  color: var(--color-prettylights-syntax-constant);
 }

 .markdown-body .pl-e,
 .markdown-body .pl-en {
-  color: #d2a8ff;
+  color: var(--color-prettylights-syntax-entity);
 }

 .markdown-body .pl-smi,
 .markdown-body .pl-s .pl-s1 {
-  color: #c9d1d9;
+  color: var(--color-prettylights-syntax-storage-modifier-import);
 }

 .markdown-body .pl-ent {
-  color: #7ee787;
+  color: var(--color-prettylights-syntax-entity-tag);
 }

 .markdown-body .pl-k {
-  color: #ff7b72;
+  color: var(--color-prettylights-syntax-keyword);
 }

 .markdown-body .pl-s,
@ -866,90 +987,90 @@
 .markdown-body .pl-sr .pl-cce,
 .markdown-body .pl-sr .pl-sre,
 .markdown-body .pl-sr .pl-sra {
-  color: #a5d6ff;
+  color: var(--color-prettylights-syntax-string);
 }

 .markdown-body .pl-v,
 .markdown-body .pl-smw {
-  color: #ffa657;
+  color: var(--color-prettylights-syntax-variable);
 }

 .markdown-body .pl-bu {
-  color: #f85149;
+  color: var(--color-prettylights-syntax-brackethighlighter-unmatched);
 }

 .markdown-body .pl-ii {
-  color: #f0f6fc;
-  background-color: #8e1519;
+  color: var(--color-prettylights-syntax-invalid-illegal-text);
+  background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
 }

 .markdown-body .pl-c2 {
-  color: #f0f6fc;
-  background-color: #b62324;
+  color: var(--color-prettylights-syntax-carriage-return-text);
+  background-color: var(--color-prettylights-syntax-carriage-return-bg);
 }

 .markdown-body .pl-sr .pl-cce {
  font-weight: bold;
-  color: #7ee787;
+  color: var(--color-prettylights-syntax-string-regexp);
 }

 .markdown-body .pl-ml {
-  color: #f2cc60;
+  color: var(--color-prettylights-syntax-markup-list);
 }

 .markdown-body .pl-mh,
 .markdown-body .pl-mh .pl-en,
 .markdown-body .pl-ms {
  font-weight: bold;
-  color: #1f6feb;
+  color: var(--color-prettylights-syntax-markup-heading);
 }

 .markdown-body .pl-mi {
  font-style: italic;
-  color: #c9d1d9;
+  color: var(--color-prettylights-syntax-markup-italic);
 }

 .markdown-body .pl-mb {
  font-weight: bold;
-  color: #c9d1d9;
+  color: var(--color-prettylights-syntax-markup-bold);
 }

 .markdown-body .pl-md {
-  color: #ffdcd7;
-  background-color: #67060c;
+  color: var(--color-prettylights-syntax-markup-deleted-text);
+  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
 }

 .markdown-body .pl-mi1 {
-  color: #aff5b4;
-  background-color: #033a16;
+  color: var(--color-prettylights-syntax-markup-inserted-text);
+  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
 }

 .markdown-body .pl-mc {
-  color: #ffdfb6;
-  background-color: #5a1e02;
+  color: var(--color-prettylights-syntax-markup-changed-text);
+  background-color: var(--color-prettylights-syntax-markup-changed-bg);
 }

 .markdown-body .pl-mi2 {
-  color: #c9d1d9;
-  background-color: #1158c7;
+  color: var(--color-prettylights-syntax-markup-ignored-text);
+  background-color: var(--color-prettylights-syntax-markup-ignored-bg);
 }

 .markdown-body .pl-mdr {
  font-weight: bold;
-  color: #d2a8ff;
+  color: var(--color-prettylights-syntax-meta-diff-range);
 }

 .markdown-body .pl-ba {
-  color: #8b949e;
+  color: var(--color-prettylights-syntax-brackethighlighter-angle);
 }

 .markdown-body .pl-sg {
-  color: #484f58;
+  color: var(--color-prettylights-syntax-sublimelinter-gutter-mark);
 }

 .markdown-body .pl-corl {
  text-decoration: underline;
-  color: #a5d6ff;
+  color: var(--color-prettylights-syntax-constant-other-reference-link);
 }

 .markdown-body g-emoji {
@ -958,7 +1079,7 @@
  font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  font-size: 1em;
  font-style: normal !important;
-  font-weight: 400;
+  font-weight: var(--base-text-weight-normal, 400);
  line-height: 1;
  vertical-align: -0.075em;
 }
@ -973,7 +1094,7 @@
 }

 .markdown-body .task-list-item label {
-  font-weight: 400;
+  font-weight: var(--base-text-weight-normal, 400);
 }

 .markdown-body .task-list-item.enabled label {
@ -1013,3 +1134,65 @@
 .markdown-body ::-webkit-calendar-picker-indicator {
  filter: invert(50%);
 }
+
+.markdown-body .markdown-alert {
+  padding: var(--base-size-8) var(--base-size-16);
+  margin-bottom: 16px;
+  color: inherit;
+  border-left: .25em solid var(--color-border-default);
+}
+
+.markdown-body .markdown-alert>:first-child {
+  margin-top: 0;
+}
+
+.markdown-body .markdown-alert>:last-child {
+  margin-bottom: 0;
+}
+
+.markdown-body .markdown-alert .markdown-alert-title {
+  display: flex;
+  font-weight: var(--base-text-weight-medium, 500);
+  align-items: center;
+  line-height: 1;
+}
+
+.markdown-body .markdown-alert.markdown-alert-note {
+  border-left-color: var(--color-accent-emphasis);
+}
+
+.markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title {
+  color: var(--color-accent-fg);
+}
+
+.markdown-body .markdown-alert.markdown-alert-important {
+  border-left-color: var(--color-done-emphasis);
+}
+
+.markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title {
+  color: var(--color-done-fg);
+}
+
+.markdown-body .markdown-alert.markdown-alert-warning {
+  border-left-color: var(--color-attention-emphasis);
+}
+
+.markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title {
+  color: var(--color-attention-fg);
+}
+
+.markdown-body .markdown-alert.markdown-alert-tip {
+  border-left-color: var(--color-success-emphasis);
+}
+
+.markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title {
+  color: var(--color-success-fg);
+}
+
+.markdown-body .markdown-alert.markdown-alert-caution {
+  border-left-color: var(--color-danger-emphasis);
+}
+
+.markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title {
+  color: var(--color-danger-fg);
+}
--- a/packages/ui-components/src/components/UpLinks/snapshots/UpLinks.test.tsx.snap
+++ b/packages/ui-components/src/components/UpLinks/snapshots/UpLinks.test.tsx.snap
@ -10,6 +10,7 @@ exports[`<UpLinks /> component should render the component when there is no upli
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 4px;
  box-shadow: none;
+  background-image: unset;
  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
@ -110,6 +111,7 @@ exports[`<UpLinks /> component should render the component when there is no upli
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 4px;
  box-shadow: none;
+  background-image: unset;
  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml