Improve emoji setup

GitbookIO · Jan 8, 2025 · 49219df · 49219df
1 parent c1e27cc
commit 49219df
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 10 deletions.
diff --git a/.changeset/forty-jars-fly.md b/.changeset/forty-jars-fly.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Improve emoji setup, align with GitBook app
diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css
@@ -4,8 +4,6 @@
 
 @layer base {
     :root {
-        /* See packages/gitbook/src/fonts/index.ts */
-        --font-emoji: 'Apple Color Emoji', var(--font-noto-color-emoji);
         --scrollbar-width: calc(100vw - 100%);
 
         --dark-base: 20 20 20;
@@ -194,9 +192,3 @@ html {
 html.dark {
     color-scheme: dark light;
 }
-
-/* Emojis */
-
-[class*='emoji'] {
-    font-family: var(--font-emoji);
-}
diff --git a/packages/gitbook/src/components/primitives/Emoji/Emoji.tsx b/packages/gitbook/src/components/primitives/Emoji/Emoji.tsx
@@ -3,11 +3,11 @@ import { ClassValue, tcls } from '@/lib/tailwind';
 
 /**
  * Render an emoji by its codepoint.
- * It renders the UTF-8 character and use the emojione font to display it (fallbacking to default browser font).
+ * It renders the UTF-8 character and use Emoji font defined in Tailwind CSS.
  */
 export async function Emoji(props: { code: string; style?: ClassValue }) {
     const { code, style } = props;
 
     const fallback = getEmojiForCode(code);
-    return <span className={tcls('emoji', style)}>{fallback}</span>;
+    return <span className={tcls('font-emoji', style)}>{fallback}</span>;
 }
diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts
@@ -64,6 +64,12 @@ const config: Config = {
             fontFamily: {
                 sans: ['var(--font-content)'],
                 mono: ['var(--font-mono)'],
+                emoji: [
+                    'Apple Color Emoji',
+                    'Noto Color Emoji',
+                    '--font-noto-color-emoji',
+                    'sans-serif',
+                ],
                 var: ['var(--font-family)'],
             },
             colors: {