Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-09-01 19:49:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

theme: add fontsize, spacing, radius variables (#10062)

Browse Source 
* theme: add fontsize, spacing, radius variables
Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

* Apply suggestion from @thecodrr

Signed-off-by: Abdullah Atta <thecodrr@protonmail.com>

* Apply suggestion from @thecodrr

Signed-off-by: Abdullah Atta <thecodrr@protonmail.com>

---------

Signed-off-by: Abdullah Atta <thecodrr@protonmail.com>
Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>
This commit is contained in:
01zulfi
2026-07-07 12:24:38 +05:00
committed by Abdullah Atta
parent 3dba0bf4e6
commit a7ca872fe1
2 changed files with 77 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/theme/src/theme/font/fontsize.ts
View File

@@ -27,7 +27,17 @@ export function getFontSizes(): FontSizes {
body: "12px",
subBody: "10px",
menu: "12px",
code: "14px"
code: "14px",
xxxs: "10px",
xxs: "11px",
xs: "13px",
sm: "15px",
md: "17px",
lg: "20px",
xl: "25px",
"2xl": "30px",
"3xl": "35px",
"4xl": "40px"
};
}
@@ -41,4 +51,14 @@ export type FontSizes = {
menu: string;
subBody: string;
code: string;
xxxs: string;
xxs: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
"2xl": string;
"3xl": string;
"4xl": string;
};

59
packages/theme/src/theme/index.ts
View File

@@ -27,7 +27,22 @@ export { createButtonVariant } from "./variants/button.js";
export { getFontConfig } from "./font/index.js";
export type Theme = {
breakpoints: string[];
space: (number | string)[] & { small?: number | string };
space: (number | string)[] & {
small?: number | string;
spacing1: number;
spacing2: number;
spacing3: number;
spacing4: number;
spacing5: number;
spacing6: number;
spacing7: number;
spacing8: number;
spacing9: number;
spacing10: number;
spacing11: number;
spacing12: number;
spacing13: number;
};
sizes: { full: "100%"; half: "50%" };
radii: {
none: number;
@@ -35,6 +50,15 @@ export type Theme = {
dialog: number;
large: number;
small: number;
radius1: number;
radius2: number;
radius3: number;
radius4: number;
radius5: number;
radius6: number;
radius7: number;
radius8: number;
radius9: number;
};
shadows: { menu: string };
colors: Record<ThemeColor, string>;
@@ -51,9 +75,38 @@ export class ThemeFactory {
static construct(config: ThemeConfig): Theme {
const theme: Theme = {
breakpoints: ["480px", "1000px", "1000px"],
space: [0, "6px", 10, 15, 20, 25, 30, 35],
space: Object.assign([0, "6px", 10, 15, 20, 25, 30, 35], {
spacing1: 3,
spacing2: 5,
spacing3: 7,
spacing4: 10,
spacing5: 13,
spacing6: 15,
spacing7: 20,
spacing8: 25,
spacing9: 30,
spacing10: 35,
spacing11: 40,
spacing12: 45,
spacing13: 50
}),
sizes: { full: "100%", half: "50%" },
radii: { none: 0, default: 5, large: 7, dialog: 10, small: 2.5 },
radii: {
none: 0,
default: 5,
large: 7,
dialog: 10,
small: 2.5,
radius1: 5,
radius2: 10,
radius3: 15,
radius4: 20,
radius5: 25,
radius6: 30,
radius7: 35,
radius8: 40,
radius9: 45
},
iconSizes: { big: 16, medium: 14, small: 12 },
colors: flattenVariants(config.scope),
shadows: