Merge pull request #63 from rtCamp/enhance/font-family

Enhancement: Add font family section

Author: mohdsayed

packages/frappe-ui-react/src/components/themeShowCase/ThemeShowcase.tsx

@@ -39,6 +39,12 @@ type RadiusToken = {
   value: string;
 };
 
+type FontFamilyToken = {
+  name: string;
+  value: string;
+  className: string;
+};
+
 // Types for default Tailwind tokens
 type DefaultToken = {
   name: string;
@@ -948,6 +954,26 @@ const ThemeShowcase: React.FC = () => {
     },
   ];
 
+  const fontFamilies: FontFamilyToken[] = [
+    {
+      name: "Sans",
+      value:
+        "Inter, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+      className: "font-sans",
+    },
+    {
+      name: "Serif",
+      value: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
+      className: "font-serif",
+    },
+    {
+      name: "Mono",
+      value:
+        "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+      className: "font-mono",
+    },
+  ];
+
   const fontSizes: FontSizeToken[] = [
     {
       name: "2xs",
@@ -1291,6 +1317,36 @@ const ThemeShowcase: React.FC = () => {
 
         {activeTab === "typography" && (
           <div className="typography">
+            <h2>Typography</h2>
+
+            {/* Font Families Section */}
+            <h2>Font Families</h2>
+            <div className="typography-section">
+              <div className="space-y-4">
+                {fontFamilies.map((font) => (
+                  <div
+                    key={font.name}
+                    className="p-4 bg-white"
+                  >
+                    <div className="flex items-baseline justify-between mb-2">
+                      <span className="font-semibold text-gray-700">
+                        {font.name}
+                      </span>
+                      <code className="text-xs text-ink-blue-2 font-semibold">
+                        {font.className}
+                      </code>
+                    </div>
+                    <p
+                      className={`${font.className} text-2xl text-gray-900 mb-1`}
+                    >
+                      The quick brown fox jumps over the lazy dog
+                    </p>
+                    <p className="text-xs text-gray-500 mt-2">{font.value}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+
             <h2>Font Sizes</h2>
             <div className="typography-section">
               <h3>Headings</h3>

tailwind.config.cjs

@@ -8,7 +8,34 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
+        sans: [
+          "Inter",
+          "ui-sans-serif",
+          "system-ui",
+          "sans-serif",
+          '"Apple Color Emoji"',
+          '"Segoe UI Emoji"',
+          '"Segoe UI Symbol"',
+          '"Noto Color Emoji"',
+        ],
+        serif: [
+          "ui-serif",
+          "Georgia",
+          "Cambria",
+          '"Times New Roman"',
+          "Times",
+          "serif",
+        ],
+        mono: [
+          "ui-monospace",
+          "SFMono-Regular",
+          "Menlo",
+          "Monaco",
+          "Consolas",
+          '"Liberation Mono"',
+          '"Courier New"',
+          "monospace",
+        ],
       },
       colors: {
         inherit: "var(--color-inherit)",