From 86597aabca88b538e4ec94cab3166704895f8567 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Jun 2020 17:52:54 +0200 Subject: [PATCH 1/7] better naming --- src/theme.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/theme.js b/src/theme.js index 22cfd8b0763..095990de3a0 100644 --- a/src/theme.js +++ b/src/theme.js @@ -39,7 +39,7 @@ export function enumerateThemes() { function setCustomThemeVars(customTheme) { const {style} = document.body; - function setCSSVariable(name, hexColor, doPct = true) { + function setCSSColorVariable(name, hexColor, doPct = true) { style.setProperty(`--${name}`, hexColor); if (doPct) { // uses #rrggbbaa to define the color with alpha values at 0%, 15% and 50% @@ -53,10 +53,10 @@ function setCustomThemeVars(customTheme) { for (const [name, value] of Object.entries(customTheme.colors)) { if (Array.isArray(value)) { for (let i = 0; i < value.length; i += 1) { - setCSSVariable(`${name}_${i}`, value[i], false); + setCSSColorVariable(`${name}_${i}`, value[i], false); } } else { - setCSSVariable(name, value); + setCSSColorVariable(name, value); } } } From e083856801179eef1c6efb6452ea50b46d3d8f7e Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Jun 2020 17:53:16 +0200 Subject: [PATCH 2/7] allow changing the font-family --- res/themes/light-custom/css/_custom.scss | 2 ++ src/theme.js | 9 +++++++++ 2 files changed, 11 insertions(+) diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 62064961504..e7912e3cb08 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -14,6 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ +$font-family: var(--font-family, $font-family); +$monospace-font-family: var(--font-family-monospace, $monospace-font-family); // // --accent-color $accent-color: var(--accent-color); diff --git a/src/theme.js b/src/theme.js index 095990de3a0..da70dc7bb13 100644 --- a/src/theme.js +++ b/src/theme.js @@ -60,6 +60,15 @@ function setCustomThemeVars(customTheme) { } } } + if (customTheme.fonts) { + const {fonts} = customTheme; + if (fonts.general) { + style.setProperty("--font-family", fonts.general); + } + if (fonts.monospace) { + style.setProperty("--font-family-monospace", fonts.monospace); + } + } } export function getCustomTheme(themeName) { From b3510aa2b47c3609810cbce2e4b2115b97291d0f Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Jun 2020 17:54:17 +0200 Subject: [PATCH 3/7] remove css vars when switching theme --- src/theme.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/theme.js b/src/theme.js index da70dc7bb13..7e0eaabf11a 100644 --- a/src/theme.js +++ b/src/theme.js @@ -35,6 +35,16 @@ export function enumerateThemes() { return Object.assign({}, customThemeNames, BUILTIN_THEMES); } +function clearCustomTheme() { + // remove all css variables, we assume these are there because of the custom theme + const inlineStyleProps = Object.values(document.body.style); + for (const prop of inlineStyleProps) { + if (prop.startsWith("--")) { + document.body.style.removeProperty(prop); + } + } +} + function setCustomThemeVars(customTheme) { const {style} = document.body; @@ -97,6 +107,7 @@ export async function setTheme(theme) { const themeWatcher = new ThemeWatcher(); theme = themeWatcher.getEffectiveTheme(); } + clearCustomTheme(); let stylesheetName = theme; if (theme.startsWith("custom-")) { const customTheme = getCustomTheme(theme.substr(7)); From 2f6fc6bba24140367c5ecdd18d40d611251d9997 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Jun 2020 17:54:38 +0200 Subject: [PATCH 4/7] allow adding custom font faces in theme --- src/theme.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/theme.js b/src/theme.js index 7e0eaabf11a..d560cc96c88 100644 --- a/src/theme.js +++ b/src/theme.js @@ -43,8 +43,23 @@ function clearCustomTheme() { document.body.style.removeProperty(prop); } } + const customFontFaceStyle = document.querySelector("head > style[title='custom-theme-font-faces']"); + if (customFontFaceStyle) { + customFontFaceStyle.remove(); + } } +function generateCustomFontFaceCSS(faces) { + return Object.entries(faces).map(([fontName, face]) => { + const src = Object.entries(face.src).map(([format, url]) => { + return `url('${url}') format('${format}')`; + }).join(", "); + return `@font-face {` + + ` font-family: '${fontName}';` + + ` src: ${src};` + + `}`; + }).join("\n"); +} function setCustomThemeVars(customTheme) { const {style} = document.body; @@ -72,6 +87,14 @@ function setCustomThemeVars(customTheme) { } if (customTheme.fonts) { const {fonts} = customTheme; + if (fonts.faces) { + const css = generateCustomFontFaceCSS(fonts.faces); + const style = document.createElement("style"); + style.setAttribute("title", "custom-theme-font-faces"); + style.setAttribute("type", "text/css"); + style.appendChild(document.createTextNode(css)); + document.head.appendChild(style); + } if (fonts.general) { style.setProperty("--font-family", fonts.general); } From 3b13a623cd755af6b196558d95515c428b8a1d83 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 23 Jun 2020 17:54:57 +0200 Subject: [PATCH 5/7] cleanup --- src/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme.js b/src/theme.js index d560cc96c88..ee9cb9c7dbd 100644 --- a/src/theme.js +++ b/src/theme.js @@ -179,7 +179,7 @@ export async function setTheme(theme) { if (a == styleElements[stylesheetName]) return; a.disabled = true; }); - const bodyStyles = global.getComputedStyle(document.getElementsByTagName("body")[0]); + const bodyStyles = global.getComputedStyle(document.body); if (bodyStyles.backgroundColor) { document.querySelector('meta[name="theme-color"]').content = bodyStyles.backgroundColor; } From b3fd1eda03ebe6ac252d842b22b8a8db48a1463c Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 24 Jun 2020 14:54:14 +0200 Subject: [PATCH 6/7] change the format of font faces to something closer to the css --- src/theme.js | 45 ++++++++++++++++++++++++++++++++++++++------- 1 file changed, 38 insertions(+), 7 deletions(-) diff --git a/src/theme.js b/src/theme.js index ee9cb9c7dbd..bfee597da4c 100644 --- a/src/theme.js +++ b/src/theme.js @@ -49,15 +49,46 @@ function clearCustomTheme() { } } +const allowedFontFaceProps = [ + "font-display", + "font-family", + "font-stretch", + "font-style", + "font-weight", + "font-variant", + "font-feature-settings", + "font-variation-settings", + "src", + "unicode-range" +]; + function generateCustomFontFaceCSS(faces) { - return Object.entries(faces).map(([fontName, face]) => { - const src = Object.entries(face.src).map(([format, url]) => { - return `url('${url}') format('${format}')`; + return faces.map(face => { + const src = face.src && face.src.map(srcElement => { + let format; + if (srcElement.format) { + format = `format("${srcElement.format}")`; + } + if (srcElement.url) { + return `url("${srcElement.url}") ${format}`; + } else if (srcElement.local) { + return `local("${srcElement.local}") ${format}`; + } + return ""; }).join(", "); - return `@font-face {` + - ` font-family: '${fontName}';` + - ` src: ${src};` + - `}`; + const props = Object.keys(face).filter(prop => allowedFontFaceProps.includes(prop)); + const body = props.map(prop => { + let value; + if (prop === "src") { + value = src; + } else if (prop === "font-family") { + value = `"${face[prop]}"`; + } else { + value = face[prop]; + } + return `${prop}: ${value}`; + }).join(";"); + return `@font-face {${body}}`; }).join("\n"); } From 183eb78fa8867858ff5d005be81ff79d9ba127d6 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Wed, 24 Jun 2020 14:58:41 +0200 Subject: [PATCH 7/7] fix lint --- src/theme.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme.js b/src/theme.js index bfee597da4c..c79e466933b 100644 --- a/src/theme.js +++ b/src/theme.js @@ -59,7 +59,7 @@ const allowedFontFaceProps = [ "font-feature-settings", "font-variation-settings", "src", - "unicode-range" + "unicode-range", ]; function generateCustomFontFaceCSS(faces) {