💄 style: Update Typography style

canisminor1990 · canisminor1990 · commit cf2845b6b1b5 · 2025-06-20T16:40:52.000+08:00
diff --git a/src/Markdown/Markdown.tsx b/src/Markdown/Markdown.tsx
@@ -67,15 +67,10 @@ const Markdown = memo<MarkdownProps>(
           defaultVariants: {
             animated: false,
             enableLatex: true,
-            gfm: true,
             variant: 'default',
           },
           /* eslint-disable sort-keys-fix/sort-keys-fix */
           variants: {
-            gfm: {
-              true: styles.gfm,
-              false: null,
-            },
             variant: {
               default: null,
               chat: styles.chat,
diff --git a/src/Markdown/markdown.style.ts b/src/Markdown/markdown.style.ts
@@ -344,6 +344,152 @@ export const useStyles = createStyles(
       }
     `;
 
+    const gfm = css`
+      .markdown-alert {
+        margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);
+        padding-inline-start: 1em;
+        border-inline-start: solid 4px ${token.colorBorder};
+
+        > p {
+          margin-block-start: 0 !important;
+        }
+      }
+
+      .markdown-alert > :first-child {
+        margin-block-start: 0;
+      }
+
+      .markdown-alert > :last-child {
+        margin-block-end: 0;
+      }
+
+      .markdown-alert-note {
+        border-inline-start-color: ${token.colorInfo};
+      }
+
+      .markdown-alert-tip {
+        border-inline-start-color: ${token.colorSuccess};
+      }
+
+      .markdown-alert-important {
+        border-inline-start-color: ${token.purple};
+      }
+
+      .markdown-alert-warning {
+        border-inline-start-color: ${token.colorWarning};
+      }
+
+      .markdown-alert-caution {
+        border-inline-start-color: ${token.colorError};
+      }
+
+      .markdown-alert-title {
+        display: flex;
+        align-items: center;
+        margin-block-end: 0.5em !important;
+        font-weight: 500;
+      }
+
+      .markdown-alert-note .markdown-alert-title {
+        color: ${token.colorInfo};
+        fill: ${token.colorInfo};
+      }
+
+      .markdown-alert-tip .markdown-alert-title {
+        color: ${token.colorSuccess};
+        fill: ${token.colorSuccess};
+      }
+
+      .markdown-alert-important .markdown-alert-title {
+        color: ${token.purple};
+        fill: ${token.purple};
+      }
+
+      .markdown-alert-warning .markdown-alert-title {
+        color: ${token.colorWarning};
+        fill: ${token.colorWarning};
+      }
+
+      .markdown-alert-caution .markdown-alert-title {
+        color: ${token.colorError};
+        fill: ${token.colorError};
+      }
+
+      .octicon {
+        overflow: visible !important;
+        display: inline-block;
+        margin-inline-end: 0.5em;
+        vertical-align: text-bottom;
+      }
+
+      .task-list-item {
+        &::before {
+          display: none !important;
+        }
+
+        input[type='checkbox'] {
+          margin-block: 0 0.25em;
+          margin-inline: -1.6em 0.2em;
+          vertical-align: middle;
+        }
+
+        input[type='checkbox']:dir(rtl) {
+          margin: 0 -1.6em 0.25em 0.2em;
+        }
+      }
+
+      /* Style the footnotes section. */
+
+      .footnotes {
+        margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 1em);
+        font-size: smaller;
+        color: #8b949e;
+
+        #footnote-label {
+          display: none;
+        }
+
+        > ol {
+          margin: 0 !important;
+        }
+      }
+
+      .sr-only {
+        position: absolute;
+
+        overflow: hidden;
+
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        border: 0;
+
+        word-wrap: normal;
+
+        clip: rect(0, 0, 0, 0);
+      }
+
+      sup:has(a[aria-describedby='footnote-label']) {
+        margin-inline: 2px;
+        vertical-align: super !important;
+
+        [data-footnote-ref] {
+          display: inline-block;
+
+          width: 16px;
+          height: 16px;
+          border-radius: 4px;
+
+          font-family: ${token.fontFamilyCode};
+          font-size: 10px;
+          color: ${token.colorTextSecondary} !important;
+          text-align: center;
+
+          background: ${token.colorFillSecondary};
+        }
+      }
+    `;
+
     return {
       root: __root,
       variant: cx(
@@ -362,6 +508,7 @@ export const useStyles = createStyles(
         svg,
         table,
         video,
+        gfm,
       ),
     };
   },
diff --git a/src/Markdown/style.ts b/src/Markdown/style.ts
@@ -49,151 +49,6 @@ export const useStyles = createStyles(({ css, token, isDarkMode }) => {
         }
       }
     `,
-    gfm: css`
-      .markdown-alert {
-        margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em);
-        padding-inline-start: 1em;
-        border-inline-start: solid 4px ${token.colorBorder};
-
-        > p {
-          margin-block-start: 0 !important;
-        }
-      }
-
-      .markdown-alert > :first-child {
-        margin-block-start: 0;
-      }
-
-      .markdown-alert > :last-child {
-        margin-block-end: 0;
-      }
-
-      .markdown-alert-note {
-        border-inline-start-color: ${token.colorInfo};
-      }
-
-      .markdown-alert-tip {
-        border-inline-start-color: ${token.colorSuccess};
-      }
-
-      .markdown-alert-important {
-        border-inline-start-color: ${token.purple};
-      }
-
-      .markdown-alert-warning {
-        border-inline-start-color: ${token.colorWarning};
-      }
-
-      .markdown-alert-caution {
-        border-inline-start-color: ${token.colorError};
-      }
-
-      .markdown-alert-title {
-        display: flex;
-        align-items: center;
-        margin-block-end: 0.5em !important;
-        font-weight: 500;
-      }
-
-      .markdown-alert-note .markdown-alert-title {
-        color: ${token.colorInfo};
-        fill: ${token.colorInfo};
-      }
-
-      .markdown-alert-tip .markdown-alert-title {
-        color: ${token.colorSuccess};
-        fill: ${token.colorSuccess};
-      }
-
-      .markdown-alert-important .markdown-alert-title {
-        color: ${token.purple};
-        fill: ${token.purple};
-      }
-
-      .markdown-alert-warning .markdown-alert-title {
-        color: ${token.colorWarning};
-        fill: ${token.colorWarning};
-      }
-
-      .markdown-alert-caution .markdown-alert-title {
-        color: ${token.colorError};
-        fill: ${token.colorError};
-      }
-
-      .octicon {
-        overflow: visible !important;
-        display: inline-block;
-        margin-inline-end: 0.5em;
-        vertical-align: text-bottom;
-      }
-
-      .task-list-item {
-        &::before {
-          display: none !important;
-        }
-
-        input[type='checkbox'] {
-          margin-block: 0 0.25em;
-          margin-inline: -1.6em 0.2em;
-          vertical-align: middle;
-        }
-
-        input[type='checkbox']:dir(rtl) {
-          margin: 0 -1.6em 0.25em 0.2em;
-        }
-      }
-
-      /* Style the footnotes section. */
-
-      .footnotes {
-        margin-block-start: calc(var(--lobe-markdown-margin-multiple) * 1em);
-        font-size: smaller;
-        color: #8b949e;
-
-        #footnote-label {
-          display: none;
-        }
-
-        > ol {
-          margin: 0 !important;
-        }
-      }
-
-      .sr-only {
-        position: absolute;
-
-        overflow: hidden;
-
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        border: 0;
-
-        word-wrap: normal;
-
-        clip: rect(0, 0, 0, 0);
-      }
-
-      sup:has(a[aria-describedby='footnote-label']) {
-        margin-inline: 2px;
-        vertical-align: super !important;
-
-        [data-footnote-ref] {
-          display: inline-block;
-
-          width: 16px;
-          height: 16px;
-          border-radius: 4px;
-
-          font-family: ${token.fontFamilyCode};
-          font-size: 10px;
-          color: ${token.colorTextSecondary} !important;
-          text-align: center;
-
-          background: ${token.colorFillSecondary};
-        }
-      }
-    `,
 
     latex: css`
       .katex-error {
