diff --git a/package.json b/package.json index a6072cd7..d8f506a1 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "frankerfacez", "author": "Dan Salvato LLC", - "version": "4.25.0", + "version": "4.26.0", "description": "FrankerFaceZ is a Twitch enhancement suite.", "private": true, "license": "Apache-2.0", diff --git a/src/sites/twitch-twilight/modules/theme/index.js b/src/sites/twitch-twilight/modules/theme/index.js index be45b72d..ff44f03a 100644 --- a/src/sites/twitch-twilight/modules/theme/index.js +++ b/src/sites/twitch-twilight/modules/theme/index.js @@ -172,27 +172,6 @@ export default class ThemeEngine extends Module { changed: () => this.updateCSS() }); - - /*this.settings.add('theme.dark', { - requires: ['theme.is-dark'], - default: false, - process(ctx, val) { - return ctx.get('theme.is-dark') ? val : false - }, - - ui: { - path: 'Appearance @{"description": "Personalize the appearance of Twitch. Change the color scheme and fonts and tune the layout to optimize your experience."} > Theme >> Legacy', - title: 'Gray (no Purple)', - description: `*Requires Dark Theme to be Enabled.* - -This setting will be going away very soon, as the new theme system matures. -The CSS loaded by this setting is far too heavy and can cause performance issues.`, - component: 'setting-check-box' - }, - - changed: val => this.updateSetting(val) - });*/ - this.settings.add('theme.can-dark', { requires: ['context.route.name'], process(ctx) { @@ -226,15 +205,6 @@ The CSS loaded by this setting is far too heavy and can cause performance issues this._normalizer = null; } - /*updateOldCSS() { - const dark = this.settings.get('theme.is-dark'), - gray = this.settings.get('theme.dark'); - - //document.body.classList.toggle('tw-root--theme-dark', dark); - document.body.classList.toggle('tw-root--theme-ffz', gray); - - this.css_tweaks.setVariable('border-color', dark ? (gray ? '#2a2a2a' : '#2c2541') : '#dad8de'); - }*/ updateFont() { let size = this.settings.get('theme.font.size'); @@ -264,6 +234,90 @@ The CSS loaded by this setting is far too heavy and can cause performance issues `); } + + generateBackgroundTextBlob(color) { + const hsla = color.toHSLA(), + luma = hsla.l, + dark = luma < 0.5; + + return this.generateBackgroundBlob(color) + this.generateTextBlob(Color.RGBA.fromCSS(dark ? '#FFF' : '#000')); + } + + + generateBackgroundBlob(color) { // eslint-disable-line class-methods-use-this + const hsla = color.toHSLA(), + luma = hsla.l, + dark = luma < 0.5; + + return [ + `--color-background-body:${color.toCSS()};`, + `--color-background-input-focus:${color.toCSS()};`, + `--color-background-base:${hsla._l(luma + (dark ? 0.05 : -0.05)).toCSS()};`, + `--color-background-alt:${hsla._l(luma + (dark ? 0.1 : -0.1)).toCSS()};`, + `--color-background-alt-2:${hsla._l(luma + (dark ? 0.15 : -0.15)).toCSS()};` + ].join(''); + } + + + generateTextBlob(color) { // eslint-disable-line class-methods-use-this + if ( color.a < 0.4 ) + color = color._a(0.4); + + const alpha = color.a; + + return [ + `--color-text-base:${color.toCSS()};`, + `--color-text-input:${color.toCSS()};`, + `--color-text-label:${color.toCSS()};`, + `--color-text-label-optional:${color._a(alpha - 0.4).toCSS()};`, + `--color-text-alt:${color._a(alpha - 0.2).toCSS()};`, + `--color-text-alt-2:${color._a(alpha - 0.4).toCSS()};` + ].join('') + } + + + generateAccentBlob(color, dark) { // eslint-disable-line class-methods-use-this + if ( color.a < 1 ) + color = color._a(1); + + const hsla = color.toHSLA(), + luma = hsla.l; + + const colors = COLORS.map(x => { + if ( x === 0 ) + return color.toCSS(); + + return hsla._l(luma + x).toCSS(); + }); + + const out = [], + accent_out = []; + + for(let i=0; i < colors.length; i++) + out.push(`--ffz-color-accent-${i+1}:${colors[i]};`); + + let source = dark ? ACCENT_COLORS.dark : ACCENT_COLORS.light; + + for(const [key,val] of Object.entries(source.c)) { + if ( typeof val !== 'number' ) + continue; + + out.push(`--color-${key}:${colors[val-1]};`); + } + + source = dark ? ACCENT_COLORS.accent_dark : ACCENT_COLORS.accent_light; + + for(const [key,val] of Object.entries(source.c)) { + if ( typeof val !== 'number' ) + continue; + + accent_out.push(`--color-${key}:${colors[val-1]} !important;`); + } + + return [out.join(''), accent_out.join('')]; + } + + updateCSS() { //this.updateOldCSS(); @@ -282,7 +336,7 @@ The CSS loaded by this setting is far too heavy and can cause performance issues const background = Color.RGBA.fromCSS(this.settings.get('theme.color.background')); if ( background ) { background.a = 1; - bits.push(`--color-background-body: ${background.toCSS()};`); + //bits.push(`--color-background-body: ${background.toCSS()};`); const hsla = background.toHSLA(), luma = hsla.l; @@ -303,68 +357,22 @@ The CSS loaded by this setting is far too heavy and can cause performance issues this.log.warning('Unable to automatically set the Twitch Dark Theme state.', err); } - bits.push(`--color-background-input-focus: ${background.toCSS()};`); - bits.push(`--color-background-base: ${hsla._l(luma + (dark ? .05 : -.05)).toCSS()};`); - bits.push(`--color-background-alt: ${hsla._l(luma + (dark ? .1 : -.1)).toCSS()};`); - bits.push(`--color-background-alt-2: ${hsla._l(luma + (dark ? .15 : -.15)).toCSS()};`); + bits.push(this.generateBackgroundBlob(hsla)); } let text = Color.RGBA.fromCSS(this.settings.get('theme.color.text')); - if ( ! text && background ) { + if ( ! text && background ) text = Color.RGBA.fromCSS(dark ? '#FFF' : '#000'); - } - - if ( text ) { - bits.push(`--color-text-base: ${text.toCSS()};`); - bits.push(`--color-text-input: ${text.toCSS()};`); - - const hsla = text.toHSLA(), - alpha = hsla.a; - - bits.push(`--color-text-label: ${text.toCSS()};`); - bits.push(`--color-text-label-optional: ${hsla._a(alpha - 0.4).toCSS()};`); - - bits.push(`--color-text-alt: ${hsla._a(alpha - 0.2).toCSS()};`); - bits.push(`--color-text-alt-2: ${hsla._a(alpha - 0.4).toCSS()};`); - } + if ( text ) + bits.push(this.generateTextBlob(text)); // Accent const accent = Color.RGBA.fromCSS(this.settings.get('theme.color.accent')); this.toggleAccentNormal(! accent); if ( accent ) { - accent.a = 1; - - const hsla = accent.toHSLA(), - luma = hsla.l; - - const colors = COLORS.map(x => { - if ( x === 0 ) - return accent.toCSS(); - - return hsla._l(luma + x).toCSS() - }); - - for(let i=0; i < colors.length; i++) { - bits.push(`--ffz-color-accent-${i+1}:${colors[i]};`); - } - - let source = dark ? ACCENT_COLORS.dark : ACCENT_COLORS.light; - - for(const [key,val] of Object.entries(source.c)) { - if ( typeof val !== 'number' ) - continue; - - bits.push(`--color-${key}:${colors[val-1]};`); - } - - source = dark ? ACCENT_COLORS.accent_dark : ACCENT_COLORS.accent_light; - - for(const [key,val] of Object.entries(source.c)) { - if ( typeof val !== 'number' ) - continue; - - accent_bits.push(`--color-${key}:${colors[val-1]} !important;`); - } + const data = this.generateAccentBlob(accent, dark); + bits.push(data[0]); + accent_bits.push(data[1]); } // Tooltips @@ -406,75 +414,28 @@ The CSS loaded by this setting is far too heavy and can cause performance issues let chat_dark = dark; if ( chat_background ) { chat_background.a = 1; - chat_bits.push(`--color-background-body: ${chat_background.toCSS()};`); - const hsla = chat_background.toHSLA(), luma = hsla.l; chat_dark = luma < 0.5; - chat_bits.push(`--color-background-input-focus: ${chat_background.toCSS()};`); - chat_bits.push(`--color-background-base: ${hsla._l(luma + (chat_dark ? .05 : -.05)).toCSS()};`); - chat_bits.push(`--color-background-alt: ${hsla._l(luma + (chat_dark ? .1 : -.1)).toCSS()};`); - chat_bits.push(`--color-background-alt-2: ${hsla._l(luma + (chat_dark ? .15 : -.15)).toCSS()};`); + chat_bits.push(this.generateBackgroundBlob(hsla)); } let chat_text = Color.RGBA.fromCSS(this.settings.get('theme.color.chat-text')); - if ( ! chat_text && chat_background ) { + if ( ! chat_text && chat_background ) chat_text = Color.RGBA.fromCSS(chat_dark ? '#FFF' : '#000'); - } + if ( chat_text ) + chat_bits.push(this.generateTextBlob(chat_text)); - if ( chat_text ) { - chat_bits.push(`--color-text-base: ${chat_text.toCSS()};`); - chat_bits.push(`--color-text-input: ${chat_text.toCSS()};`); - - const hsla = chat_text.toHSLA(), - alpha = hsla.a; - - chat_bits.push(`--color-text-label: ${chat_text.toCSS()};`); - chat_bits.push(`--color-text-label-optional: ${hsla._a(alpha - 0.4).toCSS()};`); - - chat_bits.push(`--color-text-alt: ${hsla._a(alpha - 0.2).toCSS()};`); - chat_bits.push(`--color-text-alt-2: ${hsla._a(alpha - 0.4).toCSS()};`); - } // Accent const chat_accent = Color.RGBA.fromCSS(this.settings.get('theme.color.chat-accent')), chat_accent_bits = []; //this.toggleAccentNormal(! accent); if ( chat_accent ) { - chat_accent.a = 1; - - const hsla = chat_accent.toHSLA(), - luma = hsla.l; - - const colors = COLORS.map(x => { - if ( x === 0 ) - return chat_accent.toCSS(); - - return hsla._l(luma + x).toCSS() - }); - - for(let i=0; i < colors.length; i++) { - chat_bits.push(`--ffz-color-accent-${i+1}:${colors[i]};`); - } - - let source = chat_dark ? ACCENT_COLORS.dark : ACCENT_COLORS.light; - - for(const [key,val] of Object.entries(source.c)) { - if ( typeof val !== 'number' ) - continue; - - chat_bits.push(`--color-${key}:${colors[val-1]};`); - } - - source = chat_dark ? ACCENT_COLORS.accent_dark : ACCENT_COLORS.accent_light; - - for(const [key,val] of Object.entries(source.c)) { - if ( typeof val !== 'number' ) - continue; - - chat_accent_bits.push(`--color-${key}:${colors[val-1]} !important;`); - } + const data = this.generateAccentBlob(chat_accent, chat_dark); + chat_bits.push(data[0]); + chat_accent_bits.push(data[1]); } if ( chat_bits.length ) @@ -520,32 +481,7 @@ The CSS loaded by this setting is far too heavy and can cause performance issues document.head.appendChild(this._normalizer) } - /*toggleStyle(enable) { - if ( ! this._style ) { - if ( ! enable ) - return; - - this._style = createElement('link', { - rel: 'stylesheet', - type: 'text/css', - href: THEME_CSS - }); - - } else if ( ! enable ) { - this._style.remove(); - return; - } - - document.head.appendChild(this._style); - } - - updateSetting(enable) { - this.toggleStyle(enable); - this.updateCSS(); - }*/ - onEnable() { - //this.updateSetting(this.settings.get('theme.dark')); this.updateCSS(); this.updateFont(); } diff --git a/src/utilities/color.js b/src/utilities/color.js index 968c9f35..fc95d233 100644 --- a/src/utilities/color.js +++ b/src/utilities/color.js @@ -232,6 +232,7 @@ RGBAColor.fromHSLA = function(h, s, l, a) { ); } +RGBAColor.prototype.toRGBA = function() { return this; } RGBAColor.prototype.toHSVA = function() { return HSVAColor.fromRGBA(this.r, this.g, this.b, this.a); } RGBAColor.prototype.toHSLA = function() { return HSLAColor.fromRGBA(this.r, this.g, this.b, this.a); } RGBAColor.prototype.toCSS = function() { return `rgb${this.a !== 1 ? 'a' : ''}(${Math.round(this.r)},${Math.round(this.g)},${Math.round(this.b)}${this.a !== 1 ? `,${this.a}` : ''})`; } @@ -387,6 +388,7 @@ HSLAColor.prototype.targetLuminance = function (target) { HSLAColor.prototype.toRGBA = function() { return RGBAColor.fromHSLA(this.h, this.s, this.l, this.a); } HSLAColor.prototype.toCSS = function() { return `hsl${this.a !== 1 ? 'a' : ''}(${Math.round(this.h*360)},${Math.round(this.s*100)}%,${Math.round(this.l*100)}%${this.a !== 1 ? `,${this.a}` : ''})`; } +HSLAColor.prototype.toHSLA = function() { return this; } HSLAColor.prototype.toHSVA = function() { return this.toRGBA().toHSVA(); } HSLAColor.prototype.toXYZA = function() { return this.toRGBA().toXYZA(); } HSLAColor.prototype.toLUVA = function() { return this.toRGBA().toLUVA(); } @@ -435,6 +437,7 @@ HSVAColor.fromRGBA = function(r, g, b, a) { HSVAColor.prototype.toRGBA = function() { return RGBAColor.fromHSVA(this.h, this.s, this.v, this.a); } +HSVAColor.prototype.toHSVA = function() { return this; } HSVAColor.prototype.toHSLA = function() { return this.toRGBA().toHSLA(); } HSVAColor.prototype.toXYZA = function() { return this.toRGBA().toXYZA(); } HSVAColor.prototype.toLUVA = function() { return this.toRGBA().toLUVA(); } @@ -486,6 +489,7 @@ XYZAColor.prototype.toRGBA = function() { return RGBAColor.fromXYZA(this.x, this XYZAColor.prototype.toLUVA = function() { return LUVAColor.fromXYZA(this.x, this.y, this.z, this.a); } XYZAColor.prototype.toHSLA = function() { return this.toRGBA().toHSLA(); } XYZAColor.prototype.toHSVA = function() { return this.toRGBA().toHSVA(); } +XYZAColor.prototype.toXYZA = function() { return this; } XYZAColor.prototype._x = function(x) { return new XYZAColor(x, this.y, this.z, this.a); } @@ -532,6 +536,7 @@ LUVAColor.prototype.toXYZA = function() { return XYZAColor.fromLUVA(this.l, this LUVAColor.prototype.toRGBA = function() { return this.toXYZA().toRGBA(); } LUVAColor.prototype.toHSLA = function() { return this.toXYZA().toHSLA(); } LUVAColor.prototype.toHSVA = function() { return this.toXYZA().toHSVA(); } +LUVAColor.prototype.toLUVA = function() { return this; } LUVAColor.prototype._l = function(l) { return new LUVAColor(l, this.u, this.v, this.a); }