From e3c74f9b8194e822376eb37dc9ba96882e32138f Mon Sep 17 00:00:00 2001 From: Prasanta Kumar Dutta Date: Tue, 3 Jan 2023 13:02:57 +0530 Subject: [PATCH] add and modify CSS vars for fonts --- src/components/Theme/@types/component.ts | 33 ++++++++++++++++--- src/components/Theme/themes/dark.js | 41 +++++++++++++++++------- src/components/Theme/themes/light.js | 41 +++++++++++++++++------- 3 files changed, 89 insertions(+), 26 deletions(-) diff --git a/src/components/Theme/@types/component.ts b/src/components/Theme/@types/component.ts index 2f8f7715..70b28f07 100644 --- a/src/components/Theme/@types/component.ts +++ b/src/components/Theme/@types/component.ts @@ -1,3 +1,20 @@ +interface Scale { + 'size-base': number, + 'size-1': string, + 'size-2': string, + 'size-3': string, + 'size-4': string, + 'size-5': string, + 'size-6': string, +} + +interface Fontface { + 'display': string, + 'serif': string, + 'sans-serif': string, + 'monospace': string, +} + interface Colour { background: string; 'text-primary': string; @@ -9,22 +26,30 @@ interface Colour { }; interface Font { - 'size-base': string; - 'family-serif': string, - 'family-sans-serif': string, - 'family-monospace': string, 'family-hed': string; 'family-subhed': string; 'family-body': string; 'family-note': string; + 'size-hed': string; + 'size-subhed-1': string; + 'size-subhed-2': string; + 'size-subhed-3': string; + 'size-body': string; + 'size-note-1': string; + 'size-note-2': string; + 'size-note-3': string; } export interface Theme { + scale: Scale, + fontface: Fontface colour: Colour, font: Font; }; export interface CustomTheme { + scale?: Partial, + fontface?: Partial, colour?: Partial, font?: Partial } diff --git a/src/components/Theme/themes/dark.js b/src/components/Theme/themes/dark.js index d24ba3f3..7a0cf12d 100644 --- a/src/components/Theme/themes/dark.js +++ b/src/components/Theme/themes/dark.js @@ -1,5 +1,35 @@ /** @type {import('../@types/component').Theme} */ export default { + scale: { + 'size-base': 1.375, + 'size-1': 'calc(var(--theme-scale-size-base) * 2.25rem)', + 'size-2': 'calc(var(--theme-scale-size-base) * 1.5rem)', + 'size-3': 'calc(var(--theme-scale-size-base) * 1rem)', + 'size-4': 'calc(var(--theme-scale-size-base) * 0.9rem)', + 'size-5': 'calc(var(--theme-scale-size-base) * 0.72rem)', + 'size-6': 'calc(var(--theme-scale-size-base) * 0.66rem)', + }, + fontface: { + display: 'Knowledge, sans-serif', + serif: 'freight-book, serif', + 'sans-serif': 'Knowledge, sans-serif', + monospace: + 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', + }, + font: { + 'family-hed': 'var(--theme-fontface-display)', + 'family-subhed': 'var(--theme-fontface-sans-serif)', + 'family-body': 'var(--theme-fontface-serif)', + 'family-note': 'var(--theme-fontface-sans-serif)', + 'size-hed': 'var(--theme-scale-size-1)', + 'size-subhed-1': 'var(--theme-scale-size-2)', + 'size-subhed-2': 'var(--theme-scale-size-3)', + 'size-subhed-3': 'var(--theme-scale-size-6)', + 'size-body': 'var(--theme-scale-size-3)', + 'size-note-1': 'var(--theme-scale-size-4)', + 'size-note-2': 'var(--theme-scale-size-5)', + 'size-note-3': 'var(--theme-scale-size-6)', + }, colour: { background: '#2e3440', 'text-primary': '#ffffff', @@ -9,15 +39,4 @@ export default { 'brand-rules': 'rgb(255 255 255 / 25%)', 'brand-shadow': 'rgb(255 255 255 / 10%)', }, - font: { - 'size-base': '1.375', - 'family-serif': 'freight-book, serif', - 'family-sans-serif': 'Knowledge, sans-serif', - 'family-monospace': - 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', - 'family-hed': 'var(--theme-font-family-sans-serif)', - 'family-subhed': 'var(--theme-font-family-sans-serif)', - 'family-body': 'var(--theme-font-family-serif)', - 'family-note': 'var(--theme-font-family-sans-serif)', - }, }; diff --git a/src/components/Theme/themes/light.js b/src/components/Theme/themes/light.js index 045a9cb4..202f2bf5 100644 --- a/src/components/Theme/themes/light.js +++ b/src/components/Theme/themes/light.js @@ -1,4 +1,34 @@ export default { + scale: { + 'size-base': 1.375, + 'size-1': 'calc(var(--theme-scale-size-base) * 2.25rem)', + 'size-2': 'calc(var(--theme-scale-size-base) * 1.5rem)', + 'size-3': 'calc(var(--theme-scale-size-base) * 1rem)', + 'size-4': 'calc(var(--theme-scale-size-base) * 0.9rem)', + 'size-5': 'calc(var(--theme-scale-size-base) * 0.72rem)', + 'size-6': 'calc(var(--theme-scale-size-base) * 0.66rem)', + }, + fontface: { + display: 'Knowledge, sans-serif', + serif: 'freight-book, serif', + 'sans-serif': 'Knowledge, sans-serif', + monospace: + 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', + }, + font: { + 'family-hed': 'var(--theme-fontface-display)', + 'family-subhed': 'var(--theme-fontface-sans-serif)', + 'family-body': 'var(--theme-fontface-serif)', + 'family-note': 'var(--theme-fontface-sans-serif)', + 'size-hed': 'var(--theme-scale-size-1)', + 'size-subhed-1': 'var(--theme-scale-size-2)', + 'size-subhed-2': 'var(--theme-scale-size-3)', + 'size-subhed-3': 'var(--theme-scale-size-6)', + 'size-body': 'var(--theme-scale-size-3)', + 'size-note-1': 'var(--theme-scale-size-4)', + 'size-note-2': 'var(--theme-scale-size-5)', + 'size-note-3': 'var(--theme-scale-size-6)', + }, colour: { background: '#ffffff', 'text-primary': '#404040', @@ -8,15 +38,4 @@ export default { 'brand-rules': '#d0d0d0', 'brand-shadow': 'rgb(64 64 64 / 80%)', }, - font: { - 'size-base': '1.375', - 'family-serif': 'freight-book, serif', - 'family-sans-serif': 'Knowledge, sans-serif', - 'family-monospace': - 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', - 'family-hed': 'var(--theme-font-family-sans-serif)', - 'family-subhed': 'var(--theme-font-family-sans-serif)', - 'family-body': 'var(--theme-font-family-serif)', - 'family-note': 'var(--theme-font-family-sans-serif)', - }, };