1 files changed, 65 insertions, 13 deletions

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 83faa0b3..9e068a1e 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -45,7 +45,7 @@ const adoptStyleSheets = (styles) => {
   // is nothing to do here.
 }
 
-export const generateTheme = async (input, callbacks) => {
+export const generateTheme = async (input, callbacks, debug) => {
   const {
     onNewRule = (rule, isLazy) => {},
     onLazyFinished = () => {},
@@ -61,9 +61,11 @@ export const generateTheme = async (input, callbacks) => {
   }
 
   // Assuming that "worst case scenario background" is panel background since it's the most likely one
-  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
+  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim(), debug)
 
-  getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
+  console.log('DEBUG 2 IS', debug)
+
+  getCssRules(themes3.eager, debug).forEach(rule => {
     // Hacks to support multiple selectors on same component
     if (rule.match(/::-webkit-scrollbar-button/)) {
       const parts = rule.split(/[{}]/g)
@@ -93,7 +95,7 @@ export const generateTheme = async (input, callbacks) => {
   const processChunk = () => {
     const chunk = chunks[counter]
     Promise.all(chunk.map(x => x())).then(result => {
-      getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
+      getCssRules(result.filter(x => x), debug).forEach(rule => {
         if (rule.match(/\.modal-view/)) {
           const parts = rule.split(/[{}]/g)
           const newRule = [
@@ -152,10 +154,12 @@ export const tryLoadCache = () => {
   }
 }
 
-export const applyTheme = async (input, onFinish = (data) => {}) => {
+export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
   const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
   const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
+  console.log('DEBUG IS', debug)
+
   const { lazyProcessFunc } = await generateTheme(
     input,
     {
@@ -177,7 +181,8 @@ export const applyTheme = async (input, onFinish = (data) => {}) => {
         onFinish(cache)
         localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
       }
-    }
+    },
+    debug
   )
 
   setTimeout(lazyProcessFunc, 0)
@@ -185,15 +190,53 @@ export const applyTheme = async (input, onFinish = (data) => {}) => {
   return Promise.resolve()
 }
 
-const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) =>
-  ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale })
+const extractStyleConfig = ({
+  sidebarColumnWidth,
+  contentColumnWidth,
+  notifsColumnWidth,
+  emojiReactionsScale,
+  emojiSize,
+  navbarSize,
+  panelHeaderSize,
+  textSize,
+  forcedRoundness
+}) => {
+  const result = {
+    sidebarColumnWidth,
+    contentColumnWidth,
+    notifsColumnWidth,
+    emojiReactionsScale,
+    emojiSize,
+    navbarSize,
+    panelHeaderSize,
+    textSize
+  }
 
-const defaultConfigColumns = configColumns(defaultState)
+  console.log(forcedRoundness)
+  switch (forcedRoundness) {
+    case 'disable':
+      break
+    case '0':
+      result.forcedRoundness = '0'
+      break
+    case '1':
+      result.forcedRoundness = '1px'
+      break
+    case '2':
+      result.forcedRoundness = '0.4rem'
+      break
+    default:
+  }
 
-export const applyConfig = (config) => {
-  const columns = configColumns(config)
+  return result
+}
 
-  if (columns === defaultConfigColumns) {
+const defaultStyleConfig = extractStyleConfig(defaultState)
+
+export const applyConfig = (input) => {
+  const config = extractStyleConfig(input)
+
+  if (config === defaultStyleConfig) {
     return
   }
 
@@ -202,16 +245,25 @@ export const applyConfig = (config) => {
   body.classList.add('hidden')
 
   const rules = Object
-    .entries(columns)
+    .entries(config)
     .filter(([k, v]) => v)
     .map(([k, v]) => `--${k}: ${v}`).join(';')
 
+  document.getElementById('style-config')?.remove()
   const styleEl = document.createElement('style')
+  styleEl.id = 'style-config'
   head.appendChild(styleEl)
   const styleSheet = styleEl.sheet
 
   styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
+
+  if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
+    styleSheet.insertRule(` * {
+        --roundness: var(--forcedRoundness) !important;
+    }`, 'index-max')
+  }
+
   body.classList.remove('hidden')
 }