better virtual components and stuff

src/App.scss

@@ -24,8 +24,7 @@ body {
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
   margin: 0;
-  color: $fallback--text;
+  color: var(--text);
-  color: var(--text, $fallback--text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overscroll-behavior-y: none;
@@ -111,8 +110,7 @@ body {
 
 a {
   text-decoration: none;
-  color: $fallback--link;
+  color: var(--link);
-  color: var(--link, $fallback--link);
 }
 
 h4 {
@@ -128,8 +126,7 @@ h4 {
 i[class*="icon-"],
 .svg-inline--fa,
 .iconLetter {
-  color: $fallback--icon;
+  color: var(--icon);
-  color: var(--icon, $fallback--icon);
 }
 
 .button-unstyled:hover,
@@ -763,17 +760,11 @@ option {
 }
 
 .faint {
-  color: $fallback--faint;
+  --text: var(--textFaint);
-  color: var(--faint, $fallback--faint);
+  --textGreentext: var(--textGreentextFaint);
-}
+  --link: var(--linkFaint);
 
-.faint-link {
+  color: var(--text);
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
-
-  &:hover {
-    text-decoration: underline;
-  }
 }
 
 .visibility-notice {
@@ -816,6 +807,11 @@ option {
   opacity: 0.25;
 }
 
+.timeago {
+  --link: var(--text);
+  --linkFaint: var(--textFaint);
+}
+
 .login-hint {
   text-align: center;
 

src/components/icon.style.js

@@ -1,4 +1,15 @@
 export default {
   name: 'Icon',
-  selector: '.icon'
+  virtual: true,
+  selector: '.svg-inline--fa',
+  defaultRules: [
+    {
+      component: 'Icon',
+      directives: {
+        textColor: '--text',
+        textOpacity: 0.5,
+        textOpacityMode: 'mixrgb'
+      }
+    }
+  ]
 }

src/components/link.style.js

@@ -0,0 +1,25 @@
+export default {
+  name: 'Link',
+  selector: 'a',
+  virtual: true,
+  states: {
+    faint: '.faint'
+  },
+  defaultRules: [
+    {
+      component: 'Link',
+      directives: {
+        textColor: '--link'
+      }
+    },
+    {
+      component: 'Link',
+      state: ['faint'],
+      directives: {
+        textColor: '--link',
+        textOpacity: 0.5,
+        textOpacityMode: 'fake'
+      }
+    }
+  ]
+}

src/components/notification/notification.vue

@@ -155,7 +155,7 @@
             <router-link
               v-if="notification.status"
               :to="{ name: 'conversation', params: { id: notification.status.id } }"
-              class="timeago-link faint-link"
+              class="timeago-link faint"
             >
               <Timeago
                 :time="notification.created_at"

src/components/notifications/notifications.scss

@@ -7,8 +7,7 @@
   }
 
   .loadmore-error {
-    color: $fallback--text;
+    color: var(--text);
-    color: var(--text, $fallback--text);
   }
 
   .notification {
@@ -25,7 +24,7 @@
 
     &.unseen {
       .notification-overlay {
-        background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px);
+        background-image: linear-gradient(135deg, var(--badgeNotification) 4px, transparent 10px);
       }
     }
   }
@@ -60,24 +59,17 @@
       width: 32px;
       height: 32px;
     }
-
-    .faint {
-      --link: var(--faintLink);
-      --text: var(--faint);
-    }
   }
 
   .follow-request-accept {
     &:hover {
-      color: $fallback--text;
+      color: var(--text);
-      color: var(--text, $fallback--text);
     }
   }
 
   .follow-request-reject {
     &:hover {
-      color: $fallback--cRed;
+      color: var(--cRed);
-      color: var(--cRed, $fallback--cRed);
     }
   }
 

src/components/panel.style.js

@@ -3,6 +3,7 @@ export default {
   selector: '.panel',
   validInnerComponents: [
     'Text',
+    'Link',
     'Icon',
     'Button',
     'PanelHeader'

src/components/panel_header.style.js

@@ -3,6 +3,7 @@ export default {
   selector: '.panel-heading',
   validInnerComponents: [
     'Text',
+    'Link',
     'Icon',
     'Button'
   ]

src/components/status/status.vue

@@ -180,7 +180,7 @@
 
               <span class="heading-right">
                 <router-link
-                  class="timeago faint-link"
+                  class="timeago faint"
                   :to="{ name: 'conversation', params: { id: status.id } }"
                 >
                   <Timeago

src/components/status_body/status_body.scss

@@ -113,12 +113,11 @@
   }
 
   .greentext {
-    color: $fallback--cGreen;
+    color: var(--textGreentext);
-    color: var(--postGreentext, $fallback--cGreen);
   }
 
   .cyantext {
-    color: var(--postCyantext, $fallback--cBlue);
+    color: var(--textCyantext);
   }
 
   &.-compact {

src/components/text.style.js

@@ -1,7 +1,43 @@
 export default {
   name: 'Text',
   selector: '/*text*/',
+  virtual: true,
+  variants: {
+    greentext: '.greentext'
+  },
   states: {
     faint: '.faint'
+  },
+  defaultRules: [
+    {
+      component: 'Text',
+      directives: {
+        textColor: '--text'
       }
+    },
+    {
+      component: 'Text',
+      state: ['faint'],
+      directives: {
+        textColor: '--text',
+        textOpacity: 0.5
+      }
+    },
+    {
+      component: 'Text',
+      variant: 'greentext',
+      directives: {
+        textColor: '--cGreen'
+      }
+    },
+    {
+      component: 'Text',
+      variant: 'greentext',
+      state: ['faint'],
+      directives: {
+        textColor: '--cGreen',
+        textOpacity: 0.5
+      }
+    }
+  ]
 }

src/components/underlay.style.js

@@ -1,6 +1,7 @@
 export default {
   name: 'Underlay',
-  selector: '#app',
+  selector: '#content',
+  outOfTreeSelector: '.underlay',
   validInnerComponents: [
     'Panel'
   ]

src/panel.scss

@@ -143,12 +143,6 @@
     box-shadow: var(--panelHeaderShadow);
   }
 
-  a,
-  .-link {
-    color: $fallback--link;
-    color: var(--panelLink, $fallback--link);
-  }
-
   .button-unstyled:hover,
   a:hover {
     i[class*="icon-"],
@@ -164,11 +158,6 @@
     color: var(--panelFaint, $fallback--faint);
   }
 
-  .faint-link {
-    color: $fallback--faint;
-    color: var(--faintLink, $fallback--faint);
-  }
-
   &:not(.-flexible-height) {
     > .button-default {
       flex-shrink: 0;

src/services/color_convert/color_convert.js

@@ -173,7 +173,7 @@ export const mixrgb = (a, b) => {
  * @returns {String} CSS rgba() color
  */
 export const rgba2css = function (rgba) {
-  return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, ${rgba.a})`
+  return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, ${rgba.a ?? 1})`
 }
 
 /**
@@ -188,7 +188,6 @@ export const rgba2css = function (rgba) {
  */
 export const getTextColor = function (bg, text, preserve) {
   const contrast = getContrastRatio(bg, text)
-  console.log(contrast)
 
   if (contrast < 4.5) {
     const base = typeof text.a !== 'undefined' ? { a: text.a } : {}

src/services/style_setter/style_setter.js

@@ -1,10 +1,15 @@
 import { convert } from 'chromatism'
 import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
 import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
+import { init } from '../theme_data/theme_data_3.service.js'
+import {
+  sampleRules
+} from 'src/services/theme_data/pleromafe.t3.js'
 import { defaultState } from '../../modules/config.js'
 
 export const applyTheme = (input) => {
-  const { rules } = generatePreset(input)
+  const { rules, t3b } = generatePreset(input)
+  const themes3 = init(sampleRules, t3b)
   const head = document.head
   const body = document.body
   body.classList.add('hidden')
@@ -18,6 +23,10 @@ export const applyTheme = (input) => {
   styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
+  themes3.css.forEach(rule => {
+    console.log(rule)
+    styleSheet.insertRule(rule, 'index-max')
+  })
   body.classList.remove('hidden')
 }
 
@@ -326,7 +335,7 @@ export const generateShadows = (input, colors) => {
   }
 }
 
-export const composePreset = (colors, radii, shadows, fonts) => {
+export const composePreset = (colors, radii, shadows, fonts, t3b) => {
   return {
     rules: {
       ...shadows.rules,
@@ -339,7 +348,8 @@ export const composePreset = (colors, radii, shadows, fonts) => {
       ...colors.theme,
       ...radii.theme,
       ...fonts.theme
-    }
+    },
+    t3b
   }
 }
 
@@ -349,7 +359,8 @@ export const generatePreset = (input) => {
     colors,
     generateRadii(input),
     generateShadows(input, colors.theme.colors, colors.mod),
-    generateFonts(input)
+    generateFonts(input),
+    colors.theme.colors
   )
 }
 

src/services/theme_data/pleromafe.t3.js

@@ -11,30 +11,30 @@ export const sampleRules = [
   {
     component: 'Panel',
     directives: {
-      background: '#FFFFFF',
+      background: '--fg'
-      opacity: 0.9
+      // opacity: 0.9
     }
   },
   {
     component: 'PanelHeader',
     directives: {
-      background: '#000000',
+      background: '--fg'
-      opacity: 0.9
+      // opacity: 0.9
     }
   },
   {
     component: 'Button',
     directives: {
-      background: '#000000',
+      background: '--fg'
-      opacity: 0.8
+      // opacity: 0.8
     }
   },
   {
     component: 'Button',
     state: ['hover'],
     directives: {
-      background: '#FF00FF',
+      background: '#FFFFFF'
-      opacity: 0.9
+      // opacity: 0.9
     }
   }
 ]

src/services/theme_data/theme_data_3.service.js

@@ -1,11 +1,12 @@
 import { convert } from 'chromatism'
-import { alphaBlend, getTextColor, rgba2css } from '../color_convert/color_convert.js'
+import { alphaBlend, getTextColor, rgba2css, mixrgb } from '../color_convert/color_convert.js'
 
 import Underlay from 'src/components/underlay.style.js'
 import Panel from 'src/components/panel.style.js'
 import PanelHeader from 'src/components/panel_header.style.js'
 import Button from 'src/components/button.style.js'
 import Text from 'src/components/text.style.js'
+import Link from 'src/components/link.style.js'
 import Icon from 'src/components/icon.style.js'
 
 const root = Underlay
@@ -15,6 +16,7 @@ const components = {
   PanelHeader,
   Button,
   Text,
+  Link,
   Icon
 }
 
@@ -35,9 +37,9 @@ export const getAllPossibleCombinations = (array) => {
   return combos.reduce((acc, x) => [...acc, ...x], [])
 }
 
-export const ruleToSelector = (rule) => {
+export const ruleToSelector = (rule, isParent) => {
   const component = components[rule.component]
-  const { states, variants, selector } = component
+  const { states, variants, selector, outOfTreeSelector } = component
 
   const applicableStates = ((rule.state || []).filter(x => x !== 'normal')).map(state => states[state])
 
@@ -47,31 +49,47 @@ export const ruleToSelector = (rule) => {
     applicableVariant = variants[applicableVariantName]
   }
 
-  const selectors = [selector, applicableVariant, ...applicableStates]
+  let realSelector
+  if (isParent) {
+    realSelector = selector
+  } else {
+    if (outOfTreeSelector) realSelector = outOfTreeSelector
+    else realSelector = selector
+  }
+
+  const selectors = [realSelector, applicableVariant, ...applicableStates]
     .toSorted((a, b) => {
       if (a.startsWith(':')) return 1
-      else return -1
+      if (!a.startsWith('.')) return -1
+      else return 0
     })
     .join('')
 
   if (rule.parent) {
-    return ruleToSelector(rule.parent) + ' ' + selectors
+    return ruleToSelector(rule.parent, true) + ' ' + selectors
   }
   return selectors
 }
 
-export const init = (ruleset) => {
+export const init = (extraRuleset, palette) => {
   const rootName = root.name
   const rules = []
   const rulesByComponent = {}
 
+  const ruleset = [
+    ...Object.values(components).map(c => c.defaultRules || []).reduce((acc, arr) => [...acc, ...arr], []),
+    ...extraRuleset
+  ]
+
   const addRule = (rule) => {
     rules.push(rule)
     rulesByComponent[rule.component] = rulesByComponent[rule.component] || []
     rulesByComponent[rule.component].push(rule)
   }
 
-  const findRules = (combination) => rule => {
+  const findRules = (combination, parent) => rule => {
+    // inexact search
+    const doesCombinationMatch = () => {
       if (combination.component !== rule.component) return false
       if (Object.prototype.hasOwnProperty.call(rule, 'variant')) {
         if (combination.variant !== rule.variant) return false
@@ -90,13 +108,45 @@ export const init = (ruleset) => {
         return true
       }
     }
+    const combinationMatches = doesCombinationMatch()
+    if (!parent || !combinationMatches) return combinationMatches
+
+    // exact search
+
+    // unroll parents into array
+    const unroll = (item) => {
+      const out = []
+      let currentParent = item.parent
+      while (currentParent) {
+        const { parent: newParent, ...rest } = currentParent
+        out.push(rest)
+        currentParent = newParent
+      }
+      return out
+    }
+    const { parent: _, ...rest } = parent
+    const pathSearch = [rest, ...unroll(parent)]
+    const pathRule = unroll(rule)
+    if (pathSearch.length !== pathRule.length) return false
+    const pathsMatch = pathSearch.every((searchRule, i) => {
+      const existingRule = pathRule[i]
+      if (existingRule.component !== searchRule.component) return false
+      if (existingRule.variant !== searchRule.variant) return false
+      const existingRuleStatesSet = new Set(['normal', ...(existingRule.state || [])])
+      const searchStatesSet = new Set(['normal', ...(searchRule.state || [])])
+      const setsAreEqual = existingRule.state.every(state => searchStatesSet.has(state)) &&
+              [...searchStatesSet].every(state => existingRuleStatesSet.has(state))
+      return setsAreEqual
+    })
+    return pathsMatch
+  }
 
   const findLowerLevelRule = (parent, filter = () => true) => {
     let lowerLevelComponent = null
     let currentParent = parent
     while (currentParent) {
-      const rulesParent = ruleset.filter(findRules(currentParent, true))
+      const rulesParent = ruleset.filter(findRules(currentParent))
-      rulesParent > 1 && console.log('OOPS')
+      rulesParent > 1 && console.warn('OOPS')
       lowerLevelComponent = rulesParent[rulesParent.length - 1]
       currentParent = currentParent.parent
       if (lowerLevelComponent && filter(lowerLevelComponent)) currentParent = null
@@ -104,6 +154,35 @@ export const init = (ruleset) => {
     return filter(lowerLevelComponent) ? lowerLevelComponent : null
   }
 
+  const findColor = (color) => {
+    if (typeof color === 'string' && color.startsWith('--')) {
+      const name = color.substring(2)
+      return palette[name]
+    }
+    return color
+  }
+
+  const getTextColorAlpha = (rule, lowerRule, value) => {
+    const opacity = rule.directives.textOpacity
+    const textColor = convert(findColor(value)).rgb
+    if (opacity === null || opacity === undefined || opacity >= 1) {
+      return convert(textColor).hex
+    }
+    const backgroundColor = convert(lowerRule.cache.background).rgb
+    if (opacity === 0) {
+      return convert(backgroundColor).hex
+    }
+    const opacityMode = rule.directives.textOpacityMode
+    switch (opacityMode) {
+      case 'fake':
+        return convert(alphaBlend(textColor, opacity, backgroundColor)).hex
+      case 'mixrgb':
+        return convert(mixrgb(backgroundColor, textColor)).hex
+      default:
+        return rgba2css({ a: opacity, ...textColor })
+    }
+  }
+
   const processInnerComponent = (component, parent) => {
     const {
       validInnerComponents = [],
@@ -124,79 +203,156 @@ export const init = (ruleset) => {
     const VIRTUAL_COMPONENTS = new Set(['Text', 'Link', 'Icon'])
 
     stateVariantCombination.forEach(combination => {
-      const existingRules = ruleset.filter(findRules({ component: component.name, ...combination }))
+      let needRuleAdd = false
-      const lastRule = existingRules[existingRules.length - 1]
 
-      if (existingRules.length !== 0) {
-        const { directives } = lastRule
-        const rgb = convert(directives.background).rgb
-
-        // TODO: DEFAULT TEXT COLOR
-        const bg = findLowerLevelRule(parent)?.cache.background || convert('#FFFFFF').rgb
-
-        if (!lastRule.cache?.background) {
-          const blend = directives.opacity < 1 ? alphaBlend(rgb, directives.opacity, bg) : rgb
-          lastRule.cache = lastRule.cache || {}
-          lastRule.cache.background = blend
-
-          addRule(lastRule)
-        }
-      } else {
       if (VIRTUAL_COMPONENTS.has(component.name)) {
         const selector = component.name + ruleToSelector({ component: component.name, ...combination })
+        const virtualName = [
+          '--',
+          component.name.toLowerCase(),
+          combination.variant === 'normal'
+            ? ''
+            : combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
+          ...combination.state.filter(x => x !== 'normal').toSorted().map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
+        ].join('')
 
         const lowerLevel = findLowerLevelRule(parent, (r) => {
           if (components[r.component].validInnerComponents.indexOf(component.name) < 0) return false
-            if (r.cache?.background === undefined) return false
+          if (r.cache.background === undefined) return false
           if (r.cache.textDefined) {
             return !r.cache.textDefined[selector]
           }
           return true
         })
+
         if (!lowerLevel) return
+
+        let inheritedTextColorRule
+        const inheritedTextColorRules = findLowerLevelRule(parent, (r) => {
+          return r.cache?.textDefined?.[selector]
+        })
+
+        if (!inheritedTextColorRule) {
+          const generalTextColorRules = ruleset.filter(findRules({ component: component.name, ...combination }, null, true))
+          inheritedTextColorRule = generalTextColorRules[generalTextColorRules.length - 1]
+        } else {
+          inheritedTextColorRule = inheritedTextColorRules[inheritedTextColorRules.length - 1]
+        }
+
+        let inheritedTextColor
+        let inheritedTextOpacity = {}
+        if (inheritedTextColorRule) {
+          inheritedTextColor = findColor(inheritedTextColorRule.directives.textColor)
+          // also inherit opacity settings
+          const { textOpacity, textOpacityMode } = inheritedTextColorRule.directives
+          inheritedTextOpacity = { textOpacity, textOpacityMode }
+        } else {
+          // Emergency fallback
+          inheritedTextColor = '#000000'
+        }
+
+        const textColor = getTextColor(
+          convert(lowerLevel.cache.background).rgb,
+          convert(inheritedTextColor).rgb,
+          component.name === 'Link' // make it configurable?
+        )
+
         lowerLevel.cache.textDefined = lowerLevel.cache.textDefined || {}
-          lowerLevel.cache.textDefined[selector] = true
+        lowerLevel.cache.textDefined[selector] = textColor
+        lowerLevel.virtualDirectives = lowerLevel.virtualDirectives || {}
+        lowerLevel.virtualDirectives[virtualName] = getTextColorAlpha(inheritedTextColorRule, lowerLevel, textColor)
+
+        const directives = {
+          textColor,
+          ...inheritedTextOpacity
+        }
+
+        // Debug: lets you see what it think background color should be
+        directives.background = convert(lowerLevel.cache.background).hex
+
         addRule({
           parent,
+          virtual: true,
           component: component.name,
           ...combination,
-            directives: {
+          cache: { background: lowerLevel.cache.background },
-              // TODO: DEFAULT TEXT COLOR
+          directives
-              textColor: getTextColor(convert(lowerLevel.cache.background).rgb, convert('#FFFFFF').rgb, component.name === 'Link'),
-              // Debug: lets you see what it think background color should be
-              background: convert(lowerLevel.cache.background).hex
-            }
         })
+      } else {
+        const existingGlobalRules = ruleset.filter(findRules({ component: component.name, ...combination }, null))
+        const existingRules = ruleset.filter(findRules({ component: component.name, ...combination }, parent))
+
+        // Global (general) rules
+        if (existingGlobalRules.length !== 0) {
+          const lastRule = existingGlobalRules[existingGlobalRules.length - 1]
+          const { directives } = lastRule
+          lastRule.cache = lastRule.cache || {}
+
+          if (directives.background) {
+            const rgb = convert(findColor(directives.background)).rgb
+
+            // TODO: DEFAULT TEXT COLOR
+            const bg = findLowerLevelRule(parent)?.cache.background || convert('#FFFFFF').rgb
+
+            if (!lastRule.cache.background) {
+              const blend = directives.opacity < 1 ? alphaBlend(rgb, directives.opacity, bg) : rgb
+              lastRule.cache.background = blend
+
+              needRuleAdd = true
             }
           }
 
+          if (needRuleAdd) {
+            addRule(lastRule)
+          }
+        }
+
+        if (existingRules.length !== 0) {
+          console.warn('MORE EXISTING RULES', existingRules)
+        }
+      }
       innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
     })
   }
 
   processInnerComponent(components[rootName])
 
-  // console.info(rules.map(x => [
-  //   (parent?.component || 'root') + ' -> ' + x.component,
-  //   // 'Cached background:' + convert(bg).hex,
-  //   // 'Color: ' + convert(x.directives.background).hex + ' A:' + x.directives.opacity,
-  //   JSON.stringify(x.directives)
-  //   // '=> Blend: ' + convert(x.cache.background).hex
-  // ].join(' ')))
-
   return {
     raw: rules,
     css: rules.map(rule => {
-      const header = ruleToSelector(rule) + ' {'
+      if (rule.virtual) return ''
+
+      let selector = ruleToSelector(rule).replace(/\/\*.*\*\//g, '')
+      if (!selector) {
+        selector = 'body'
+      }
+      const header = selector + ' {'
       const footer = '}'
+
+      const virtualDirectives = Object.entries(rule.virtualDirectives || {}).map(([k, v]) => {
+        return '  ' + k + ': ' + v
+      }).join(';\n')
+
       const directives = Object.entries(rule.directives).map(([k, v]) => {
         switch (k) {
-          case 'background': return 'background-color: ' + rgba2css({ ...convert(v).rgb, a: rule.directives.opacity ?? 1 })
+          case 'background': {
-          case 'textColor': return 'color: ' + rgba2css({ ...convert(v).rgb, a: rule.directives.opacity ?? 1 })
+            return 'background-color: ' + rgba2css({ ...convert(findColor(v)).rgb, a: rule.directives.opacity ?? 1 })
+          }
+          case 'textColor': {
+            return 'color: ' + v
+          }
           default: return ''
         }
       }).filter(x => x).map(x => '  ' + x).join(';\n')
-      return [header, directives, footer].join('\n')
+
-    })
+      return [
+        header,
+        directives + ';',
+        '  color: var(--text);',
+        '',
+        virtualDirectives,
+        footer
+      ].join('\n')
+    }).filter(x => x)
   }
 }

test/unit/specs/services/theme_data/theme_data3.spec.js

@@ -17,7 +17,7 @@ describe.only('Theme Data 3', () => {
 
   describe('init', () => {
     it('test simple case', () => {
-      const out = init(sampleRules)
+      const out = init(sampleRules, palette)
       // console.log(JSON.stringify(out, null, 2))
       console.log('\n' + out.css.join('\n') + '\n')
     })