Merge branch 'themes3-grand-finale-maybe' into shigusegubu-themes3

src/components/settings_modal/tabs/appearance_tab.js

@@ -361,8 +361,27 @@ const AppearanceTab = {
             onlyNormalState: true
           })
         } else if (version === 'v3') {
+          const palette = input.find(x => x.component === '@palette')
+          let paletteRule
+          if (palette) {
+            const { directives } = palette
+            directives.link = directives.link || directives.accent
+            directives.accent = directives.accent || directives.link
+            paletteRule = {
+              component: 'Root',
+              directives: Object.fromEntries(
+                Object
+                  .entries(directives)
+                  .filter(([k, v]) => k && k !== 'name')
+                  .map(([k, v]) => ['--' + k, 'color | ' + v])
+              )
+            }
+          } else {
+            paletteRule = null
+          }
+
           theme3 = init({
-            inputRuleset: input,
+            inputRuleset: [...input, paletteRule].filter(x => x),
             ultimateBackgroundColor: '#000000',
             liteMode: true,
             debug: true,

src/i18n/en.json

@@ -701,7 +701,7 @@
     "use_websockets": "Use websockets (Realtime updates)",
     "text": "Text",
     "theme": "Theme",
-    "theme_old": "Theme (old)",
+    "theme_old": "Theme editor (old)",
     "theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
     "theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
     "theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
@@ -781,7 +781,7 @@
           "imported": "Imported"
         },
         "editor": {
-          "title": "Style",
+          "title": "Style editor",
           "reset_style": "Reset",
           "load_style": "Open from file",
           "save_style": "Save",

src/modules/interface.js

@@ -3,6 +3,10 @@ import { CURRENT_VERSION, generatePreset } from 'src/services/theme_data/theme_d
 import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
 import { deserialize } from '../services/theme_data/iss_deserializer.js'
 
+// helper for debugging
+// eslint-disable-next-line no-unused-vars
+const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
+
 const defaultState = {
   localFonts: null,
   themeApplied: false,
@@ -264,6 +268,7 @@ const interfaceMod = {
     setStyle ({ dispatch, commit }, value) {
       dispatch('resetThemeV3')
       dispatch('resetThemeV2')
+      dispatch('resetThemeV3Palette')
 
       commit('setOption', { name: 'style', value })
 
@@ -272,6 +277,7 @@ const interfaceMod = {
     setStyleCustom ({ dispatch, commit }, value) {
       dispatch('resetThemeV3')
       dispatch('resetThemeV2')
+      dispatch('resetThemeV3Palette')
 
       commit('setOption', { name: 'styleCustomData', value })
 
@@ -443,14 +449,47 @@ const interfaceMod = {
       console.debug('Version used', majorVersionUsed)
 
       if (majorVersionUsed === 'v3') {
+        state.themeDataUsed = null
+        state.themeNameUsed = null
+
+        const style = await getData(
+          'style',
+          stylesIndex,
+          userStyleCustomData,
+          userStyleName || instanceStyleName
+        )
+        state.styleNameUsed = style.nameUsed
+        state.styleDataUsed = style.dataUsed
+
+        let firstStylePaletteName = null
+        style
+          .dataUsed
+          ?.filter(x => x.component === '@palette')
+          .map(x => {
+            const cleanDirectives = Object.fromEntries(
+              Object
+                .entries(x.directives)
+                .filter(([k, v]) => k)
+            )
+
+            return { name: x.variant, ...cleanDirectives }
+          })
+          .forEach(palette => {
+            const key = 'style.' + palette.name.toLowerCase().replace(/ /, '_')
+            if (!firstStylePaletteName) firstStylePaletteName = key
+            palettesIndex[key] = () => Promise.resolve(palette)
+          })
+
         const palette = await getData(
           'palette',
           palettesIndex,
           userPaletteCustomData,
-          userPaletteName || instancePaletteName
+          userPaletteName || firstStylePaletteName || instancePaletteName
         )
+
         state.paletteNameUsed = palette.nameUsed
         state.paletteDataUsed = palette.dataUsed
+
         if (state.paletteDataUsed) {
           state.paletteDataUsed.link = state.paletteDataUsed.link || state.paletteDataUsed.accent
           state.paletteDataUsed.accent = state.paletteDataUsed.accent || state.paletteDataUsed.link
@@ -481,23 +520,19 @@ const interfaceMod = {
           }
         }
         console.debug('Palette data used', palette.dataUsed)
-
-        const style = await getData(
-          'style',
-          stylesIndex,
-          userStyleCustomData,
-          userStyleName || instanceStyleName
-        )
-        state.styleNameUsed = style.nameUsed
-        state.styleDataUsed = style.dataUsed
       } else {
+        state.styleNameUsed = null
+        state.styleDataUsed = null
+        state.paletteNameUsed = null
+        state.paletteDataUsed = null
+
         const theme = await getData(
           'theme',
           themesIndex,
           userThemeV2Source || userThemeV2Snapshot,
           userThemeV2Name || instanceThemeV2Name
         )
-        // themeNameUsed = theme.nameUsed
+        state.themeNameUsed = theme.nameUsed
         state.themeDataUsed = theme.dataUsed
       }
     },
@@ -519,10 +554,6 @@ const interfaceMod = {
       }
       await dispatch('getThemeData')
 
-      // commit('setOption', { name: 'palette', value: paletteNameUsed })
-      // commit('setOption', { name: 'style', value: styleNameUsed })
-      // commit('setOption', { name: 'theme', value: themeNameUsed })
-
       const paletteIss = (() => {
         if (!state.paletteDataUsed) return null
         const result = {

src/services/style_setter/style_setter.js

@@ -122,16 +122,28 @@ export const applyTheme = (input, onFinish = (data) => {}, debug) => {
   const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
   const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
+  const insertRule = (styles, rule) => {
+    if (rule.indexOf('webkit') >= 0) {
+      try {
+        styles.sheet.insertRule(rule, 'index-max')
+        styles.rules.push(rule)
+      } catch (e) {
+        console.warn('Can\'t insert rule due to lack of support', e)
+      }
+    } else {
+      styles.sheet.insertRule(rule, 'index-max')
+      styles.rules.push(rule)
+    }
+  }
+
   const { lazyProcessFunc } = generateTheme(
     input,
     {
       onNewRule (rule, isLazy) {
         if (isLazy) {
-          lazyStyles.sheet.insertRule(rule, 'index-max')
+          insertRule(lazyStyles, rule)
-          lazyStyles.rules.push(rule)
         } else {
-          eagerStyles.sheet.insertRule(rule, 'index-max')
+          insertRule(eagerStyles, rule)
-          eagerStyles.rules.push(rule)
         }
       },
       onEagerFinished () {

src/services/theme_data/css_utils.js

@@ -82,7 +82,7 @@ export const getCssRules = (rules, debug) => rules.map(rule => {
           `
         }
         if (v === 'transparent') {
-          if (rule.component === 'Root') return []
+          if (rule.component === 'Root') return null
           return [
             rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
             '  --background: ' + v
@@ -114,7 +114,7 @@ export const getCssRules = (rules, debug) => rules.map(rule => {
       }
       default:
         if (k.startsWith('--')) {
-          const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+          const [type, value] = v.split('|').map(x => x.trim())
           switch (type) {
             case 'color': {
               const color = rule.dynamicVars[k]
@@ -127,21 +127,20 @@ export const getCssRules = (rules, debug) => rules.map(rule => {
             case 'generic':
               return k + ': ' + value
             default:
-              return ''
+              return null
           }
         }
-        return ''
+        return null
     }
-  }).filter(x => x).map(x => '  ' + x).join(';\n')
+  }).filter(x => x).map(x => '  ' + x + ';').join('\n')
 
   return [
     header,
-    directives + ';',
+    directives,
     (rule.component === 'Text' && rule.state.indexOf('faint') < 0 && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
-    '',
     virtualDirectives,
     footer
-  ].join('\n')
+  ].filter(x => x).join('\n')
 }).filter(x => x)
 
 export const getScopedVersion = (rules, newScope) => {