Skip to content

Commit

Permalink
Update themeToCSS to use user's font-size as well as theme definitions
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgclark
jgclark committed Dec 27, 2024
1 parent f7b6124 commit 3eea0f6
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 564 deletions.
59 changes: 33 additions & 26 deletions helpers/NPThemeToCSS.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,26 @@
// ---------------------------------------------------------
// HTML helper functions to create CSS from NP Themes
// by @jgclark
// Last updated 30.6.2024 by @jgclark
// Last updated 2024-12-27 by @jgclark
// ---------------------------------------------------------

import { clo, logDebug, logError, logInfo, logWarn, JSP } from '@helpers/dev'

// ---------------------------------------------------------
// Constants and Types

let baseFontSize = 14 // updated later
let userFSPref: number // updated later
let themeBodyFS: number // updated later
let baseFontSize: number // updated later

// ---------------------------------------------------------

/**
* Generate CSS instructions from the given theme (or current one if not given, or 'dark' theme if that isn't available) to use as an embedded style sheet.
* Generate CSS as an equivalent to the given theme (or current one if not given, or 'dark' theme if that isn't available) to use as an embedded style sheet.
* TODO: ideally consult theme to see if Editor's "shouldOverwriteFont" is false before changing font size and family?
*
* @author @jgclark
* @param {string?} themeNameIn
* @param {string?} themeNameIn (optional)
* @returns {string} outputCSS
*/
export function generateCSSFromTheme(themeNameIn: string = ''): string {
Expand Down Expand Up @@ -89,15 +93,27 @@ export function generateCSSFromTheme(themeNameIn: string = ''): string {
// - theme body, or
// - user's NP Editor setting
// - or default to 14
const userFSPref = DataStore.preference('fontSize')
const themeFSPref = themeJSON?.styles?.body?.size ?? NaN
baseFontSize = themeFSPref && !isNaN(Number(themeFSPref)) ? Number(themeFSPref) : userFSPref && !isNaN(Number(userFSPref)) ? Number(userFSPref) : 14
// logDebug('generateCSSFromTheme', `baseFontSize -> ${String(baseFontSize)}`)
userFSPref = Number(DataStore.preference('fontSize')) ?? NaN
themeBodyFS = Number(themeJSON?.styles?.body?.size) ?? 14
baseFontSize = userFSPref ?? themeBodyFS
logDebug('generateCSSFromTheme', `baseFontSize -> ${String(baseFontSize)}`)
const bgMainColor = themeJSON?.editor?.backgroundColor ?? '#1D1E1F'
tempSel.push(`background: var(--bg-main-color)`)
tempSel.push(`font-size: ${baseFontSize}px`)
output.push(makeCSSSelector('html', tempSel))
rootSel.push(`--bg-main-color: ${bgMainColor}`)
// Set sidebar from NP fixed colours
if (currentThemeMode === 'light') {
rootSel.push(`--fg-sidebar-color: #242E32`)
rootSel.push(`--bg-sidebar-color: #F6F6F6`)
rootSel.push(`--divider-color: #D6D6D6`)
} else {
rootSel.push(`--fg-sidebar-color: #EBEBEB`)
rootSel.push(`--bg-sidebar-color: #383838`)
rootSel.push(`--divider-color: #52535B`)
}
// Set body:
// - main font = styles.body.font
const tempBodyFont = themeJSON.styles.body.font ?? '-apple-system'
Expand All @@ -106,12 +122,12 @@ export function generateCSSFromTheme(themeNameIn: string = ''): string {
// - main foreground colour (styles.body.color)
// - main background colour (editor.backgroundColor)
tempSel = []
tempSel.push(`font-size: ${baseFontSize}px`)
styleObj = themeJSON.styles.body
if (styleObj) {
const thisColor = RGBColourConvert(themeJSON?.editor?.textColor ?? '#CC6666')
tempSel.push(`color: var(--fg-main-color)`)
tempSel = tempSel.concat(convertStyleObjectBlock(styleObj))
tempSel.push(`font-size: ${baseFontSize}px`)
output.push(makeCSSSelector('body, .body', tempSel))
rootSel.push(`--fg-main-color: ${thisColor}`)
if (styleObj?.lineSpacing) {
Expand All @@ -121,17 +137,6 @@ export function generateCSSFromTheme(themeNameIn: string = ''): string {
}
}
// Set sidebar from NP fixed colours
if (currentThemeMode === 'light') {
rootSel.push(`--fg-sidebar-color: #242E32`)
rootSel.push(`--bg-sidebar-color: #F6F6F6`)
rootSel.push(`--divider-color: #D6D6D6`)
} else {
rootSel.push(`--fg-sidebar-color: #EBEBEB`)
rootSel.push(`--bg-sidebar-color: #383838`)
rootSel.push(`--divider-color: #52535B`)
}

// Set H1 from styles.title1
tempSel = []
styleObj = themeJSON.styles.title1
Expand Down Expand Up @@ -436,7 +441,7 @@ export function generateCSSFromTheme(themeNameIn: string = ''): string {

/**
* Convert NotePlan Theme style information to CSS equivalent(s)
* Covers attributes within a theme item: size, paragraphSpacingBefore, paragraphSpacing, lineSpacing, font, strikethroughStyle, underlineStyle, underlineColor.
* Covers attributes within a theme item: size (of font), paragraphSpacingBefore, paragraphSpacing, lineSpacing, font, strikethroughStyle, underlineStyle, underlineColor.
* @author @jgclark
* @param {Object} style object from JSON theme
* @param {boolean} includeFontDetails? (default: false)
Expand All @@ -445,18 +450,18 @@ export function generateCSSFromTheme(themeNameIn: string = ''): string {
function convertStyleObjectBlock(styleObject: any, includeFontDetails: boolean = true): Array<string> {
let cssStyleLinesOutput: Array<string> = []
if (styleObject?.size) {
cssStyleLinesOutput.push(`font-size: ${pxToRem(styleObject?.size, baseFontSize)}`)
cssStyleLinesOutput.push(`font-size: ${pxToRem(styleObject?.size, userFSPref)}`)
}
if (includeFontDetails) {
if (styleObject?.font) {
cssStyleLinesOutput = cssStyleLinesOutput.concat(fontPropertiesFromNP(styleObject?.font))
}
}
if (styleObject?.paragraphSpacingBefore) {
cssStyleLinesOutput.push(`margin-top: ${pxToRem(styleObject?.paragraphSpacingBefore, baseFontSize)}`)
cssStyleLinesOutput.push(`margin-top: ${pxToRem(styleObject?.paragraphSpacingBefore, userFSPref)}`)
}
if (styleObject?.paragraphSpacing) {
cssStyleLinesOutput.push(`margin-bottom: ${pxToRem(styleObject?.paragraphSpacing, baseFontSize)}`)
cssStyleLinesOutput.push(`margin-bottom: ${pxToRem(styleObject?.paragraphSpacing, userFSPref)}`)
}
if (styleObject?.lineSpacing) {
const lineSpacingRem = (Number(styleObject?.lineSpacing) * 1.5).toPrecision(3) // this fudge factor seems to be required
Expand Down Expand Up @@ -600,7 +605,9 @@ export function textDecorationFromNP(selector: string, value: number): string {

/**
* Convert a font size (in px) to rem (as a string).
* Uses the NP theme's baseFontSize (in px) to be the basis for 1.0rem.
* Note: assumes userFSPref (in px) is the basis for 1.0rem.
* Then uses the ratio between the input size and the body size.
* e.g. if body = 16, then H1 at 24 => 24/16 = 1.5rem
* @param {number} thisFontSize
* @param {number} baseFontSize
* @returns {string} size including 'rem' units
Expand All @@ -610,7 +617,7 @@ export function pxToRem(thisFontSize: number, baseFontSize: number): string {
// Note: Need to apply fudge to get it closer to actual size seen in NP Editor
rem *= 0.95
const output = `${String(rem.toPrecision(2))}rem`
// logInfo('pxToRem', `${thisFontSize}px -> ${output}`)
logInfo('pxToRem', `${thisFontSize}px / ${baseFontSize} -> ${output}`)
return output
}

Expand Down
Loading

0 comments on commit 3eea0f6

Please sign in to comment.