docs + various polish

Jacky Zhao

2023-07-10 08f8e3b4a4879dd7c91c16fbce80c4f2bc5e357f

 quartz/theme.ts

@@ -21,14 +21,15 @@
  }
}

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 templateThemeStyles(theme: Theme, stylesheet: string) {
  return `
:root {
export function joinStyles(theme: Theme, ...stylesheet: string[]) {
  return `:root {
  --light: ${theme.colors.lightMode.light};
  --lightgray: ${theme.colors.lightMode.lightgray};
  --gray: ${theme.colors.lightMode.gray};
@@ -38,9 +39,9 @@
  --tertiary: ${theme.colors.lightMode.tertiary};
  --highlight: ${theme.colors.lightMode.highlight};

  --headerFont: ${theme.typography.header};
  --bodyFont: ${theme.typography.body};
  --codeFont: ${theme.typography.code};
  --headerFont: ${theme.typography.header}, ${DEFAULT_SANS_SERIF};
  --bodyFont: ${theme.typography.body}, ${DEFAULT_SANS_SERIF};
  --codeFont: ${theme.typography.code}, ${DEFAULT_MONO};
}

:root[saved-theme="dark"] {
@@ -54,6 +55,5 @@
  --highlight: ${theme.colors.darkMode.highlight};
}

${stylesheet}
`
${stylesheet.join("\n\n")}`
}