✨: Add Persian fonts

Namatek · Oct 22, 2024 · 6afc9ca · 6afc9ca
1 parent 016fd91
commit 6afc9ca
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 20 deletions.
diff --git a/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx b/app/client/packages/design-system/theming/src/hooks/src/useTheme.tsx
@@ -10,7 +10,7 @@ import {
 } from "./";
 
 import type { ColorMode } from "../../color";
-import type { TokenSource } from "../../token";
+import type { TokenSource, FontFamily } from "../../token";
 
 const tokensAccessor = new TokensAccessor({
   ...(defaultTokens as TokenSource),
@@ -22,10 +22,12 @@ export interface UseThemeProps {
   borderRadius?: string;
   userDensity?: number;
   userSizing?: number;
+  fontFamily?: FontFamily;
 }
 
 export function useTheme(props: UseThemeProps = {}) {
   const {
+    fontFamily,
     borderRadius,
     colorMode = "light",
     seedColor,
@@ -41,6 +43,7 @@ export function useTheme(props: UseThemeProps = {}) {
     userSizing,
   );
   const { typography } = useTypography(
+    fontFamily,
     tokensConfigs.typography,
     userDensity,
     userSizing,
@@ -52,6 +55,7 @@ export function useTheme(props: UseThemeProps = {}) {
   );
 
   const theme = useMemo(() => {
+
     // Color mode
     tokensAccessor.updateColorMode(colorMode);
 
@@ -77,6 +81,7 @@ export function useTheme(props: UseThemeProps = {}) {
     // Typography
     if (typography != null) {
       tokensAccessor.updateTypography(typography);
+      tokensAccessor.updateFontFamily(fontFamily);
     }
 
     // Sizing
@@ -107,6 +112,7 @@ export function useTheme(props: UseThemeProps = {}) {
       ...tokensAccessor.getInnerSpacing(),
       ...tokensAccessor.getIconSize(),
       ...tokensAccessor.getStrokeWidth(),
+      fontFamily: tokensAccessor.getFontFamily(),
     };
   }, [
     colorMode,
@@ -118,6 +124,7 @@ export function useTheme(props: UseThemeProps = {}) {
     innerSpacing,
     iconSize,
     strokeWidth,
+    fontFamily,
   ]);
 
   return { theme };

diff --git a/app/client/packages/design-system/theming/src/token/src/types.ts b/app/client/packages/design-system/theming/src/token/src/types.ts
@@ -64,6 +64,38 @@ export interface TokenScaleConfig {
   userDensityRatio?: number;
 }
 
+import arial from "@capsizecss/metrics/arial";
+import inter from "@capsizecss/metrics/inter";
+import rubik from "@capsizecss/metrics/rubik";
+import roboto from "@capsizecss/metrics/roboto";
+import ubuntu from "@capsizecss/metrics/ubuntu";
+import poppins from "@capsizecss/metrics/poppins";
+import segoeUI from "@capsizecss/metrics/segoeUI";
+import openSans from "@capsizecss/metrics/openSans";
+import notoSans from "@capsizecss/metrics/notoSans";
+import montserrat from "@capsizecss/metrics/montserrat";
+import nunitoSans from "@capsizecss/metrics/nunitoSans12pt";
+import appleSystem from "@capsizecss/metrics/appleSystem";
+import BlinkMacSystemFont from "@capsizecss/metrics/blinkMacSystemFont";
+import VazirMatn from "@capsizecss/metrics/vazirmatn";
+
+export const FONT_METRICS = {
+  Poppins: poppins,
+  Inter: inter,
+  Roboto: roboto,
+  Rubik: rubik,
+  Ubuntu: ubuntu,
+  "Noto Sans": notoSans,
+  "Open Sans": openSans,
+  Montserrat: montserrat,
+  "Nunito Sans": nunitoSans,
+  Arial: arial,
+  "-apple-system": appleSystem,
+  BlinkMacSystemFont: BlinkMacSystemFont,
+  "Segoe UI": segoeUI,
+  VazirMatn: VazirMatn,
+} as const;
+
 // we use "as const" here because we need to iterate by variants
 export const TYPOGRAPHY_VARIANTS = {
   footnote: "footnote",
@@ -86,6 +118,8 @@ export const TYPOGRAPHY_FONT_WEIGHTS = {
   900: 900,
 } as const;
 
+export type FontFamily = keyof typeof FONT_METRICS | "System Default";
+
 export interface TypographyVariantMetric {
   fontSize: string;
   lineHeight: string;

diff --git a/app/client/packages/dsl/src/migrate/helpers/widget-configs.json b/app/client/packages/dsl/src/migrate/helpers/widget-configs.json
@@ -385,6 +385,14 @@
               {
                 "label": "Ubuntu",
                 "value": "Ubuntu"
+              },
+              {
+                "label": "YekanBakh",
+                "value": "YekanBakh"                
+              },
+              {
+                "label" : "VazirMatn",
+                "value" : "VazirMatn"                
               }
             ],
             "defaultValue": "System Default",

diff --git a/app/client/src/assets/fonts/custom/index.css b/app/client/src/assets/fonts/custom/index.css
@@ -8,3 +8,5 @@
 @import "./rubik/rubik.css";
 @import "./ubuntu/ubuntu.css";
 @import "./twemoji/twemoji.css";
+@import "./yekanBakh/yekanBakh.css";
+@import "./vazir-matn/vazirMatn.css";
diff --git a/app/client/src/assets/fonts/custom/vazir-matn/vazir-matn-01/Vazirmatn.ttf b/app/client/src/assets/fonts/custom/vazir-matn/vazir-matn-01/Vazirmatn.ttf
diff --git a/app/client/src/assets/fonts/custom/vazir-matn/vazirMatn.css b/app/client/src/assets/fonts/custom/vazir-matn/vazirMatn.css
@@ -0,0 +1,6 @@
+@font-face {
+    font-display: swap;
+    font-family: "VazirMatn";
+    font-style: normal;
+    src: url("./vazir-matn-01/Vazirmatn.ttf")
+  }
diff --git a/app/client/src/assets/fonts/custom/yekanBakh/yekanBakh.css b/app/client/src/assets/fonts/custom/yekanBakh/yekanBakh.css
@@ -0,0 +1,5 @@
+@font-face {
+  font-display: swap;
+  font-family: "YekanBakh";
+  src: url("./yekanBakh/YekanBakhFaNum-VF.ttf");
+}
diff --git a/app/client/src/assets/fonts/custom/yekanBakh/yekanBakh/YekanBakhFaNum-VF.ttf b/app/client/src/assets/fonts/custom/yekanBakh/yekanBakh/YekanBakhFaNum-VF.ttf
diff --git a/...t/src/components/editorComponents/PartialImportExport/PartialExportModal/unitTestUtils.ts b/...t/src/components/editorComponents/PartialImportExport/PartialExportModal/unitTestUtils.ts
@@ -16277,6 +16277,8 @@ export const defaultAppState = {
                 "Roboto",
                 "Rubik",
                 "Ubuntu",
+                "VazirMatn",
+                "YekanBakh"
               ],
             },
           },
@@ -16711,6 +16713,8 @@ export const defaultAppState = {
                 "Roboto",
                 "Rubik",
                 "Ubuntu",
+                "VazirMatn",
+                "YekanBakh"
               ],
             },
           },
@@ -17144,6 +17148,8 @@ export const defaultAppState = {
                 "Roboto",
                 "Rubik",
                 "Ubuntu",
+                "VazirMatn",
+                "YekanBakh"
               ],
             },
           },
@@ -17160,7 +17166,7 @@ export const defaultAppState = {
                 "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
             },
             fontFamily: {
-              appFont: "Rubik",
+              appFont: "YekanBakh",
             },
           },
           stylesheet: {
@@ -17578,6 +17584,8 @@ export const defaultAppState = {
                 "Roboto",
                 "Rubik",
                 "Ubuntu",
+                "VazirMatn",
+                "YekanBakh"
               ],
             },
           },
@@ -17594,7 +17602,7 @@ export const defaultAppState = {
                 "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
             },
             fontFamily: {
-              appFont: "Rubik",
+              appFont: "YekanBakh",
             },
           },
           stylesheet: {
@@ -18012,6 +18020,8 @@ export const defaultAppState = {
                 "Roboto",
                 "Rubik",
                 "Ubuntu",
+                "VazirMatn",
+                "YekanBakh"
               ],
             },
           },
@@ -18446,6 +18456,8 @@ export const defaultAppState = {
                 "Roboto",
                 "Rubik",
                 "Ubuntu",
+                "VazirMatn",
+                "YekanBakh"
               ],
             },
           },
@@ -18880,6 +18892,8 @@ export const defaultAppState = {
                 "Roboto",
                 "Rubik",
                 "Ubuntu",
+                "VazirMatn",
+                "YekanBakh"
               ],
             },
           },
@@ -19314,6 +19328,8 @@ export const defaultAppState = {
                 "Roboto",
                 "Rubik",
                 "Ubuntu",
+                "VazirMatn",
+                "YekanBakh"
               ],
             },
           },
@@ -19748,6 +19764,8 @@ export const defaultAppState = {
                 "Roboto",
                 "Rubik",
                 "Ubuntu",
+                "VazirMatn",
+                "YekanBakh"
               ],
             },
           },
@@ -20188,6 +20206,8 @@ export const defaultAppState = {
               "Roboto",
               "Rubik",
               "Ubuntu",
+              "YekanBakh",
+              "VazirMatn"
             ],
           },
         },

diff --git a/app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeFontControl.tsx b/app/client/src/pages/Editor/ThemePropertyPane/controls/ThemeFontControl.tsx
@@ -48,7 +48,7 @@ function ThemeFontControl(props: ThemeFontControlProps) {
               <FontText className="flex items-center justify-center">
                 Aa
               </FontText>
-              <div className="leading-normal">{option}</div>
+              <div className="leading-normal">{option === 'Rubik' ? "YekanBakh" : option}</div>
             </div>
           </Option>
         ))}

diff --git a/app/client/src/widgets/TextWidget/widget/index.tsx b/app/client/src/widgets/TextWidget/widget/index.tsx
@@ -312,6 +312,14 @@ class TextWidget extends BaseWidget<TextWidgetProps, WidgetState> {
                 label: "Ubuntu",
                 value: "Ubuntu",
               },
+              {
+                label: "YekanBakh",
+                value: "YekanBakh",
+              },
+              {
+                label: "VazirMatn",
+                value: "VazirMatn"
+              },
             ],
             defaultValue: "System Default",
             isJSConvertible: true,