From 10b02007b3cc5e2e5cf7a0e58c1600f32f1503fc Mon Sep 17 00:00:00 2001 From: Ammar Ahmed Date: Wed, 15 Apr 2026 10:49:58 +0500 Subject: [PATCH] mobile: add style guide baseline --- apps/mobile/app/common/design/font.ts | 24 ++++ apps/mobile/app/common/design/spacing.ts | 21 +++ .../app/components/ui/typography/heading.tsx | 29 +++-- .../components/ui/typography/paragraph.tsx | 15 ++- apps/mobile/app/services/settings.ts | 3 +- apps/mobile/app/utils/size/index.js | 122 ++++++++---------- apps/mobile/app/utils/styles.ts | 2 +- 7 files changed, 135 insertions(+), 81 deletions(-) create mode 100644 apps/mobile/app/common/design/font.ts create mode 100644 apps/mobile/app/common/design/spacing.ts diff --git a/apps/mobile/app/common/design/font.ts b/apps/mobile/app/common/design/font.ts new file mode 100644 index 000000000..a25787b81 --- /dev/null +++ b/apps/mobile/app/common/design/font.ts @@ -0,0 +1,24 @@ +export const FontSizes = { + XXS: 10, + XS: 12, + SM: 14, + MD: 16, + LG: 18, + XL: 20, + XXL: 32 +}; + +export const FontFamily = { + REGULAR: "Inter-Regular", // 400 + MEDIUM: "Inter-Medium", // 500 + SEMI_BOLD: "Inter-SemiBold", // 600 + BOLD: "Inter-Bold" // 700 +}; + +export const getLineHeight = ( + fontSize: keyof typeof FontSizes, + type: 1 | 2 +) => { + if (type === 1) return FontSizes[fontSize]; + if (type === 2) return (FontSizes[fontSize] / 100) * 150; +}; diff --git a/apps/mobile/app/common/design/spacing.ts b/apps/mobile/app/common/design/spacing.ts new file mode 100644 index 000000000..ffd30f860 --- /dev/null +++ b/apps/mobile/app/common/design/spacing.ts @@ -0,0 +1,21 @@ +export const Spacing = { + LEVEL_0: 4, + LEVEL_1: 8, + LEVEL_2: 12, + LEVEL_3: 16, + LEVEL_4: 20, + LEVEL_5: 24, + LEVEL_6: 28, + LEVEL_7: 32, + LEVEL_8: 40 +}; + +export const Radius = { + XXS: 4, + XS: 8, + S: 12, + MD: 16, + LG: 20, + LG_2: 32, + XXL: 40 +}; diff --git a/apps/mobile/app/components/ui/typography/heading.tsx b/apps/mobile/app/components/ui/typography/heading.tsx index a1ea7319f..ea5bc20e4 100644 --- a/apps/mobile/app/components/ui/typography/heading.tsx +++ b/apps/mobile/app/components/ui/typography/heading.tsx @@ -19,21 +19,26 @@ along with this program. If not, see . import { useThemeColors } from "@notesnook/theme"; import React from "react"; -import { Platform, Text, TextProps, ViewStyle } from "react-native"; +import { Text, TextProps, ViewStyle } from "react-native"; import { AppFontSize } from "../../../utils/size"; +import { FontFamily, FontSizes } from "../../../common/design/font"; + interface HeadingProps extends TextProps { color?: string; + /** + * @deprecated Use fontSize prop instead + */ size?: number; extraBold?: boolean; + fontSize?: keyof typeof FontSizes; + fontFamily?: keyof typeof FontFamily; } const extraBoldStyle = { - fontFamily: Platform.OS === "android" ? "Inter-Bold" : undefined, - fontWeight: Platform.OS === "ios" ? "800" : undefined + fontFamily: FontFamily.BOLD }; const boldStyle = { - fontFamily: Platform.OS === "android" ? "Inter-SemiBold" : undefined, - fontWeight: Platform.OS === "ios" ? "600" : undefined + fontFamily: FontFamily.SEMI_BOLD }; const Heading = ({ @@ -41,23 +46,29 @@ const Heading = ({ size = AppFontSize.xl, style, extraBold, + fontSize, + fontFamily, ...restProps }: HeadingProps) => { const { colors } = useThemeColors(); return ( + /> ); }; diff --git a/apps/mobile/app/components/ui/typography/paragraph.tsx b/apps/mobile/app/components/ui/typography/paragraph.tsx index 5f7184056..096e796bb 100644 --- a/apps/mobile/app/components/ui/typography/paragraph.tsx +++ b/apps/mobile/app/components/ui/typography/paragraph.tsx @@ -21,14 +21,23 @@ import { useThemeColors } from "@notesnook/theme"; import React from "react"; import { Text, TextProps } from "react-native"; import { AppFontSize } from "../../../utils/size"; +import { FontFamily, FontSizes } from "../../../common/design/font"; + interface ParagraphProps extends TextProps { color?: string; + /** + * @deprecated Use fontSize prop instead + */ size?: number; + fontSize?: keyof typeof FontSizes; + fontFamily?: keyof typeof FontFamily; } const Paragraph = ({ color, size = AppFontSize.sm, style, + fontSize, + fontFamily, ...restProps }: ParagraphProps) => { const { colors } = useThemeColors(); @@ -36,12 +45,12 @@ const Paragraph = ({ return ( . import { Dimensions, PixelRatio, Platform } from "react-native"; import { DDS } from "../../services/device-detection"; +import { FontSizes } from "../../common/design/font"; +import { Radius } from "../../common/design/spacing"; export const scale = { fontScale: 1 }; + let windowSize = Dimensions.get("window"); let adjustedWidth = windowSize.width * PixelRatio.get(); let adjustedHeight = windowSize.height * PixelRatio.get(); @@ -37,77 +40,64 @@ export const getDeviceSize = () => { return Platform.isPad ? diagonalSize + 2 : diagonalSize; }; -const getDpi = (pd) => { - return 160 * pd; -}; -const correction = (size, multiplier) => { - let dSize = getDeviceSize(); - if (dSize <= 4.5 && pixelDensity <= 3) { - return size * 0.85; - } else if (dSize <= 5.3 && pixelDensity <= 3) { - return size * 0.93; - } else if (dSize > 5.3 && dSize < 7 && pixelDensity < 3 && !DDS.isTab) { - if (Platform.OS === "ios") { - return size; - } - return size * 0.97; - } else if (dSize <= 7 && pixelDensity >= 3 && !DDS.isTab) { - return size * 0.98; - } else if (dSize >= 6.5 && dSize <= 7.2 && DDS.isTab) { - return size * multiplier; - } else if (dSize > 7.2 && dSize <= 8.5 && DDS.isTab) { - return size * 0.92; - } else if (dSize > 8.5 && dSize <= 9.2 && DDS.isTab) { - return size * 0.92; - } else if (dSize > 9.2 && dSize <= 10.5 && DDS.isTab) { - return size * 0.95; - } else if (dSize > 10.5) { - return size * 1; - } else { - return size; - } -}; +// const getDpi = (pd) => { +// return 160 * pd; +// }; +// const correction = (size, multiplier) => { +// let dSize = getDeviceSize(); +// if (dSize <= 4.5 && pixelDensity <= 3) { +// return size * 0.85; +// } else if (dSize <= 5.3 && pixelDensity <= 3) { +// return size * 0.93; +// } else if (dSize > 5.3 && dSize < 7 && pixelDensity < 3 && !DDS.isTab) { +// if (Platform.OS === "ios") { +// return size; +// } +// return size * 0.97; +// } else if (dSize <= 7 && pixelDensity >= 3 && !DDS.isTab) { +// return size * 0.98; +// } else if (dSize >= 6.5 && dSize <= 7.2 && DDS.isTab) { +// return size * multiplier; +// } else if (dSize > 7.2 && dSize <= 8.5 && DDS.isTab) { +// return size * 0.92; +// } else if (dSize > 8.5 && dSize <= 9.2 && DDS.isTab) { +// return size * 0.92; +// } else if (dSize > 9.2 && dSize <= 10.5 && DDS.isTab) { +// return size * 0.95; +// } else if (dSize > 10.5) { +// return size * 1; +// } else { +// return size; +// } +// }; export const normalize = (size) => { - let pd = pixelDensity; - if (pd === 1 || pd < 1) { - return correction(size, 0.82); - } else if (pd > 1 && pd <= 1.5) { - return correction(size, 0.7); - } else if (pd > 1.5 && pd <= 2) { - return correction(size, 0.9); - } else if (pd > 2 && pd <= 3) { - return correction(size, 0.93); - } else if (pd > 3) { - return correction(size, 1); - } + return size; + // let pd = pixelDensity; + // if (pd === 1 || pd < 1) { + // return correction(size, 0.82); + // } else if (pd > 1 && pd <= 1.5) { + // return correction(size, 0.7); + // } else if (pd > 1.5 && pd <= 2) { + // return correction(size, 0.9); + // } else if (pd > 2 && pd <= 3) { + // return correction(size, 0.93); + // } else if (pd > 3) { + // return correction(size, 1); + // } }; function getSize() { return { - xxxs: normalize(11.5) * scale.fontScale, - xxs: normalize(12.5) * scale.fontScale, - xs: normalize(13.5) * scale.fontScale, - sm: normalize(14.5) * scale.fontScale, - md: normalize(16.5) * scale.fontScale, - lg: normalize(20) * scale.fontScale, - xl: normalize(22) * scale.fontScale, - xxl: normalize(25) * scale.fontScale, - xxxl: normalize(30) * scale.fontScale + xxxs: FontSizes.XXS, + xxs: FontSizes.XXS, + xs: FontSizes.XX, + sm: FontSizes.SM, + md: FontSizes.MD, + lg: FontSizes.LG, + xl: FontSizes.XL, + xxl: FontSizes.XXL, + xxxl: FontSizes.XXL }; } - export const AppFontSize = getSize(); - -export function updateSize() { - const newSize = getSize(); - for (const key in AppFontSize) { - AppFontSize[key] = newSize[key]; - } - ph = normalize(10) * scale.fontScale; - pv = normalize(10) * scale.fontScale; -} - -export const defaultBorderRadius = 8; // border radius -export var ph = normalize(10); // padding horizontal -export var pv = normalize(10); // padding vertical -export const opacity = 0.5; // active opacity +export const defaultBorderRadius = Radius.S; // border radius diff --git a/apps/mobile/app/utils/styles.ts b/apps/mobile/app/utils/styles.ts index 0c183ee54..6059554e9 100644 --- a/apps/mobile/app/utils/styles.ts +++ b/apps/mobile/app/utils/styles.ts @@ -19,6 +19,6 @@ along with this program. If not, see . export const DefaultAppStyles = { GAP: 16, GAP_SMALL: 8, - GAP_VERTICAL: 10, + GAP_VERTICAL: 12, GAP_VERTICAL_SMALL: 6 };