330e322e48
* feat: fetch google fonts before build Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * Update quartz/plugins/emitters/componentResources.ts * fix: fetching wolff2 Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: remove request stylesheet Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: race condition Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: remove preconnect for static fonts since we are already downloading fonts into public folder Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: remove deadcode Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: add options to gate for cdn caching Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * chore: apply jacky's suggestion Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * chore: add docs and only use one promise Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * fix: fmt Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> * chore: remove deadcode * chore: final touches Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> * revert: changes in theme.ts * fix: styles and remove deadcode Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> --------- Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
export interface ColorScheme {
|
|
light: string
|
|
lightgray: string
|
|
gray: string
|
|
darkgray: string
|
|
dark: string
|
|
secondary: string
|
|
tertiary: string
|
|
highlight: string
|
|
}
|
|
|
|
export interface Theme {
|
|
typography: {
|
|
header: string
|
|
body: string
|
|
code: string
|
|
}
|
|
cdnCaching: boolean
|
|
colors: {
|
|
lightMode: ColorScheme
|
|
darkMode: ColorScheme
|
|
}
|
|
}
|
|
|
|
const DEFAULT_SANS_SERIF =
|
|
'-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
|
|
const DEFAULT_MONO = "ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace"
|
|
|
|
export function googleFontHref(theme: Theme) {
|
|
const { code, header, body } = theme.typography
|
|
return `https://fonts.googleapis.com/css2?family=${code}&family=${header}:wght@400;700&family=${body}:ital,wght@0,400;0,600;1,400;1,600&display=swap`
|
|
}
|
|
|
|
export function joinStyles(theme: Theme, ...stylesheet: string[]) {
|
|
return `
|
|
${stylesheet.join("\n\n")}
|
|
|
|
:root {
|
|
--light: ${theme.colors.lightMode.light};
|
|
--lightgray: ${theme.colors.lightMode.lightgray};
|
|
--gray: ${theme.colors.lightMode.gray};
|
|
--darkgray: ${theme.colors.lightMode.darkgray};
|
|
--dark: ${theme.colors.lightMode.dark};
|
|
--secondary: ${theme.colors.lightMode.secondary};
|
|
--tertiary: ${theme.colors.lightMode.tertiary};
|
|
--highlight: ${theme.colors.lightMode.highlight};
|
|
|
|
--headerFont: "${theme.typography.header}", ${DEFAULT_SANS_SERIF};
|
|
--bodyFont: "${theme.typography.body}", ${DEFAULT_SANS_SERIF};
|
|
--codeFont: "${theme.typography.code}", ${DEFAULT_MONO};
|
|
}
|
|
|
|
:root[saved-theme="dark"] {
|
|
--light: ${theme.colors.darkMode.light};
|
|
--lightgray: ${theme.colors.darkMode.lightgray};
|
|
--gray: ${theme.colors.darkMode.gray};
|
|
--darkgray: ${theme.colors.darkMode.darkgray};
|
|
--dark: ${theme.colors.darkMode.dark};
|
|
--secondary: ${theme.colors.darkMode.secondary};
|
|
--tertiary: ${theme.colors.darkMode.tertiary};
|
|
--highlight: ${theme.colors.darkMode.highlight};
|
|
}
|
|
`
|
|
}
|