From 66b5f9aced9bde48221ba74a43f198c6d4c31ba0 Mon Sep 17 00:00:00 2001 From: olehp Date: Tue, 27 Feb 2024 15:34:35 +0200 Subject: [PATCH 1/2] add font size --- src/components/common/App/themes/darkTheme.ts | 7 +++++++ src/components/common/App/themes/lightTheme.ts | 7 +++++++ src/styled.d.ts | 7 +++++++ 3 files changed, 21 insertions(+) diff --git a/src/components/common/App/themes/darkTheme.ts b/src/components/common/App/themes/darkTheme.ts index 3a13a73c7..85d9c44f2 100644 --- a/src/components/common/App/themes/darkTheme.ts +++ b/src/components/common/App/themes/darkTheme.ts @@ -272,6 +272,13 @@ export const darkTheme: ThemeColors = { low: v3colors.blue[300], backgroundSuccess: v3colors.green[400], success: v3colors.green[300] + }, + fontSize: { + body: "14px", + subscript: "13px", + footnote: "12px", + captionOne: "11px", + captionTwo: "10px" } } }; diff --git a/src/components/common/App/themes/lightTheme.ts b/src/components/common/App/themes/lightTheme.ts index 5d1922146..1d0fad035 100644 --- a/src/components/common/App/themes/lightTheme.ts +++ b/src/components/common/App/themes/lightTheme.ts @@ -270,6 +270,13 @@ export const lightTheme: ThemeColors = { low: v3colors.blue[200], backgroundSuccess: v3colors.green[100], success: v3colors.green[200] + }, + fontSize: { + body: "14px", + subscript: "13px", + footnote: "12px", + captionOne: "11px", + captionTwo: "10px" } } }; diff --git a/src/styled.d.ts b/src/styled.d.ts index d9961638a..83abaf17d 100644 --- a/src/styled.d.ts +++ b/src/styled.d.ts @@ -110,6 +110,13 @@ export interface ThemeColors { backgroundSuccess: string; success: string; }; + fontSize: { + body: string; + subscript: string; + footnote: string; + captionOne: string; + captionTwo: string; + }; }; } From 2b9a0845d0ec061f5347746d6554aaabc3c43026 Mon Sep 17 00:00:00 2001 From: olehp Date: Tue, 27 Feb 2024 16:10:10 +0200 Subject: [PATCH 2/2] add Typographies --- src/components/common/App/getTheme.ts | 2 + src/components/common/App/themes/darkTheme.ts | 7 --- .../common/App/themes/lightTheme.ts | 7 --- src/components/common/App/typographies.ts | 59 +++++++++++++++++++ src/styled.d.ts | 30 +++++++--- 5 files changed, 84 insertions(+), 21 deletions(-) create mode 100644 src/components/common/App/typographies.ts diff --git a/src/components/common/App/getTheme.ts b/src/components/common/App/getTheme.ts index 8d8eeef85..3229f80c5 100644 --- a/src/components/common/App/getTheme.ts +++ b/src/components/common/App/getTheme.ts @@ -3,6 +3,7 @@ import { Mode } from "../../../globals"; import { ThemeColors } from "../../../styled"; import { darkTheme } from "./themes/darkTheme"; import { lightTheme } from "./themes/lightTheme"; +import { typographies } from "./typographies"; const getColors = (mode: Mode): ThemeColors => { switch (mode) { @@ -23,6 +24,7 @@ export const getTheme = ( mode, mainFont, codeFont, + typographies, colors: getColors(mode) }; }; diff --git a/src/components/common/App/themes/darkTheme.ts b/src/components/common/App/themes/darkTheme.ts index 85d9c44f2..3a13a73c7 100644 --- a/src/components/common/App/themes/darkTheme.ts +++ b/src/components/common/App/themes/darkTheme.ts @@ -272,13 +272,6 @@ export const darkTheme: ThemeColors = { low: v3colors.blue[300], backgroundSuccess: v3colors.green[400], success: v3colors.green[300] - }, - fontSize: { - body: "14px", - subscript: "13px", - footnote: "12px", - captionOne: "11px", - captionTwo: "10px" } } }; diff --git a/src/components/common/App/themes/lightTheme.ts b/src/components/common/App/themes/lightTheme.ts index 1d0fad035..5d1922146 100644 --- a/src/components/common/App/themes/lightTheme.ts +++ b/src/components/common/App/themes/lightTheme.ts @@ -270,13 +270,6 @@ export const lightTheme: ThemeColors = { low: v3colors.blue[200], backgroundSuccess: v3colors.green[100], success: v3colors.green[200] - }, - fontSize: { - body: "14px", - subscript: "13px", - footnote: "12px", - captionOne: "11px", - captionTwo: "10px" } } }; diff --git a/src/components/common/App/typographies.ts b/src/components/common/App/typographies.ts new file mode 100644 index 000000000..00d701213 --- /dev/null +++ b/src/components/common/App/typographies.ts @@ -0,0 +1,59 @@ +import { Typographies } from "../../../styled"; + +export const typographies: Typographies = { + body: { + fontSize: "14px", + weight: { + light: 300, + regular: 400, + medium: 500, + semibold: 600, + bold: 700 + }, + lineHeight: "18px" + }, + subscript: { + fontSize: "13px", + weight: { + light: 300, + regular: 400, + medium: 500, + semibold: 600, + bold: 700 + }, + lineHeight: "16px" + }, + footNote: { + fontSize: "12px", + weight: { + light: 300, + regular: 400, + medium: 500, + semibold: 600, + bold: 600 + }, + lineHeight: "16px" + }, + captionOne: { + fontSize: "11px", + weight: { + light: 300, + regular: 400, + medium: 500, + semibold: 600, + bold: 600 + }, + lineHeight: "14px" + }, + captionTwo: { + fontSize: "10px", + weight: { + light: 300, + regular: 400, + medium: 500, + semibold: 600, + bold: 600 + }, + lineHeight: "14px" + } +}; diff --git a/src/styled.d.ts b/src/styled.d.ts index 83abaf17d..a7dbcb729 100644 --- a/src/styled.d.ts +++ b/src/styled.d.ts @@ -110,21 +110,37 @@ export interface ThemeColors { backgroundSuccess: string; success: string; }; - fontSize: { - body: string; - subscript: string; - footnote: string; - captionOne: string; - captionTwo: string; - }; }; } +interface FontWeights { + regular: number; + light: number; + medium: number; + semibold: number; + bold: number; +} + +interface FontStyle { + lineHeight: string; + fontSize: string; + weight: FontWeights; +} + +export interface Typographies { + captionOne: FontStyle; + captionTwo: FontStyle; + footNote: FontStyle; + subscript: FontStyle; + body: FontStyle; +} + declare module "styled-components" { export interface DefaultTheme { mode: Mode; mainFont: string; codeFont: string; colors: ThemeColors; + typographies: Typographies; } }