Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-07-10 12:37:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

mobile: add style guide baseline

Browse Source
This commit is contained in:
Ammar Ahmed
2026-04-15 10:49:58 +05:00
parent 0b1aa3315b
commit 10b02007b3
7 changed files with 135 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/mobile/app/common/design/font.ts Normal file
View File

@@ -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;
};

21
apps/mobile/app/common/design/spacing.ts Normal file
View File

@@ -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
};

29
apps/mobile/app/components/ui/typography/heading.tsx
View File

@@ -19,21 +19,26 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
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 (
<Text
allowFontScaling={true}
{...restProps}
allowFontScaling={true}
style={[
{
fontSize: size || AppFontSize.xl,
fontSize: fontSize ? FontSizes[fontSize] : size || AppFontSize.xl,
color: color || colors.primary.heading
},
extraBold ? (extraBoldStyle as ViewStyle) : (boldStyle as ViewStyle),
fontFamily
? { fontFamily: FontFamily[fontFamily] }
: extraBold
? (extraBoldStyle as ViewStyle)
: (boldStyle as ViewStyle),
style
]}
></Text>
/>
);
};

15
apps/mobile/app/components/ui/typography/paragraph.tsx
View File

@@ -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 (
<Text
{...restProps}
allowFontScaling={true}
style={[
{
fontSize: size || AppFontSize.sm,
fontSize: fontSize ? FontSizes[fontSize] : size || AppFontSize.xl,
color: color || colors.primary.paragraph,
fontWeight: "400",
fontFamily: "Inter-Regular"
fontFamily: fontFamily ? FontFamily[fontFamily] : FontFamily.REGULAR
},
style
]}

3
apps/mobile/app/services/settings.ts
View File

@@ -27,7 +27,7 @@ import {
useSettingStore
} from "../stores/use-setting-store";
import { NotesnookModule } from "../utils/notesnook-module";
import { scale, updateSize } from "../utils/size";
import { scale } from "../utils/size";
import { DatabaseLogger } from "../common/database";
import { useUserStore } from "../stores/use-user-store";
import ScreenGuardModule from "react-native-screenguard";
@@ -123,7 +123,6 @@ function init() {
scale.fontScale = settings.fontScale;
}
updateSize();
useSettingStore.getState().setSettings({ ...settings });
migrateAppLock();
setPrivacyScreen(settings);

122
apps/mobile/app/utils/size/index.js
View File

@@ -19,10 +19,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
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

2
apps/mobile/app/utils/styles.ts
View File

@@ -19,6 +19,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
export const DefaultAppStyles = {
GAP: 16,
GAP_SMALL: 8,
GAP_VERTICAL: 10,
GAP_VERTICAL: 12,
GAP_VERTICAL_SMALL: 6
};