From 2a6259a4779a686ccbd2a0e725e8cc369eb067f2 Mon Sep 17 00:00:00 2001 From: Steffen Vogel Date: Tue, 2 May 2023 15:45:37 +0200 Subject: [PATCH] allow setting arbitrary custom CSS properties for branding themes Signed-off-by: Steffen Vogel --- src/branding/branding.js | 76 ++-------------------- src/branding/slew/slew-values.js | 10 +-- src/branding/template/template-values.js | 12 ++-- src/branding/villasweb/villasweb-values.js | 6 +- src/styles/app.css | 33 +++++----- 5 files changed, 35 insertions(+), 102 deletions(-) diff --git a/src/branding/branding.js b/src/branding/branding.js index bdc5e87..c839439 100644 --- a/src/branding/branding.js +++ b/src/branding/branding.js @@ -172,36 +172,8 @@ class Branding { const rootEl = document.querySelector(':root'); - let background = this.getBackgroundColor(); - if (background) { - rootEl.style.setProperty('--bg', background); - } else { - console.log(document.body.style.backgroundColor) - } - - let maincolor = this.getMainColor(); - if (maincolor) { - rootEl.style.setProperty('--maincolor', maincolor); - } - - let highlight = this.getHighlightColor(); - if (highlight) { - rootEl.style.setProperty('--highlights', highlight); - } - - let secondary = this.getSecondaryTextColor(); - if (secondary) { - rootEl.style.setProperty('--secondarytext', secondary); - } - - let font = this.getFont(); - if (font) { - rootEl.style.setProperty('--mainfont', font); - } - - let borderradius = this.getBorderRadius(); - if (borderradius) { - rootEl.style.setProperty('--borderradius', borderradius); + for (const [key, value] of Object.entries(this.values.style)) { + rootEl.style.setProperty('--' + key, value); } } @@ -213,51 +185,11 @@ class Branding { } catch (err) { console.error("cannot find './" + this.brand + '/img/' + this.values.logo + "'"); } - + return image; } - getBackgroundColor() { - if (this.values.style && this.values.style.background) { - return this.values.style.background; - } - return null; - } - getMainColor() { - if (this.values.style && this.values.style.maincolor) { - return this.values.style.maincolor; - } - return null; - } - - getHighlightColor() { - if (this.values.style && this.values.style.highlights) { - return this.values.style.highlights; - } - return null; - } - - getSecondaryTextColor() { - if (this.values.style && this.values.style.secondarytext) { - return this.values.style.secondarytext; - } - return null; - } - - getFont() { - if (this.values.style && this.values.style.font) { - return this.values.style.secondarytext; - } - return null; - } - - getBorderRadius() { - if (this.values.style && this.values.style.borderradius) { - return this.values.style.borderradius; - } - return null; - } getTitle() { return this.values.title ? this.values.title : "No Title!"; @@ -270,4 +202,4 @@ class Branding { var branding = new Branding(process.env.REACT_APP_BRAND); -export default branding; \ No newline at end of file +export default branding; diff --git a/src/branding/slew/slew-values.js b/src/branding/slew/slew-values.js index 1a7c323..102079b 100644 --- a/src/branding/slew/slew-values.js +++ b/src/branding/slew/slew-values.js @@ -34,11 +34,11 @@ const slew_values = { style: { background: 'rgba(207,209,210, 1)', highlights: 'rgba(0,84,159, 0.75)', - maincolor: 'rgba(80,80,80, 1)', - secondarytext: 'rgba(80,80,80, 0.9)', - font: "16px Roboto, sans-serif", - borderradius: "10px" + main: 'rgba(80,80,80, 1)', + secondaryText: 'rgba(80,80,80, 0.9)', + fontFamily: "Roboto, sans-serif", + borderRadius: "10px" } } -export default slew_values; \ No newline at end of file +export default slew_values; diff --git a/src/branding/template/template-values.js b/src/branding/template/template-values.js index 6eb7215..d74304c 100644 --- a/src/branding/template/template-values.js +++ b/src/branding/template/template-values.js @@ -34,11 +34,11 @@ style: { background: 'rgba(50,30,90, 0.6)', highlights: 'rgba(0,230,5, 0.75)', - maincolor: 'rgba(255,0,0, 1)', - secondarytext: 'rgba(0,0,100, 0.8)', - font: "16px Comic Sans, sans-serif", - borderradius: "60px" + main: 'rgba(255,0,0, 1)', + secondaryText: 'rgba(0,0,100, 0.8)', + fontFamily: "Comic Sans, sans-serif", + borderRadius: "60px" } } - - export default template_values; \ No newline at end of file + + export default template_values; diff --git a/src/branding/villasweb/villasweb-values.js b/src/branding/villasweb/villasweb-values.js index 2b0fdf5..0a73c7f 100644 --- a/src/branding/villasweb/villasweb-values.js +++ b/src/branding/villasweb/villasweb-values.js @@ -29,9 +29,9 @@ const villasweb_values = { style: { background: '#6EA2B0', highlights: '#527984', - maincolor: '#4d4d4d', - secondarytext: '#818181', + main: '#4d4d4d', + secondaryText: '#818181', } } -export default villasweb_values; \ No newline at end of file +export default villasweb_values; diff --git a/src/styles/app.css b/src/styles/app.css index a7cfdaa..ccf111e 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -20,30 +20,31 @@ */ :root { - --bg: #eceded; + --main: #4d4d4d; + --background: #eceded; --highlights: #527984; - --secondarytext: #818181; - --borderradius: 0px; - --mainfont: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; - --maincolor: #4d4d4d; - --bgtext:#fff; + --secondaryText: #818181; + --borderRadius: 0px; + --fontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif; + --backgroundText:#fff; } * { - color: var(--maincolor); + color: var(--main); } body { - background-color: var(--bg) !important; + background-color: var(--background) !important; + font-family: var(--fontFamily) !important; } .app { height: 100vh; - color: var(--maincolor); - border-radius: var(--borderradius); + color: var(--main); + border-radius: var(--borderRadius); - font: var(--mainfont); + font: 16px; hyphens: auto; } @@ -91,13 +92,13 @@ a:active { margin-top: 2em; padding-bottom: 2em; - color: var(--bgtext); + color: var(--backgroundText); text-align: center; } .app-footer a { text-decoration: underline; - color: var(--bgtext); + color: var(--backgroundText); } .app-body-spacing { @@ -110,7 +111,7 @@ a:active { .app-content { padding: 15px 20px 20px 20px; - border-radius: var(--borderradius); + border-radius: var(--borderRadius); width: auto; @@ -145,7 +146,7 @@ a:active { padding: 20px; margin-bottom: 20px; width: 160px; - border-radius: var(--borderradius); + border-radius: var(--borderRadius); background-color: #fff; @@ -159,7 +160,7 @@ a:active { text-align: center; margin-bottom: 20px; width: 160px; - border-radius: var(--borderradius); + border-radius: var(--borderRadius); background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),