fixed oot selectors not working, added support for (webkit) scrollbars

src/App.scss

@@ -49,9 +49,8 @@ body {
 
     &::-webkit-scrollbar-button,
     &::-webkit-scrollbar-thumb {
-      background-color: var(--btn);
+      box-shadow: var(--shadow);
-      box-shadow: var(--buttonShadow);
+      border-radius: var(--roundness);
-      border-radius: var(--btnRadius);
     }
 
     // horizontal/vertical/increment/decrement are webkit-specific stuff
@@ -60,7 +59,7 @@ body {
     &::-webkit-scrollbar-button {
       --___bgPadding: 2px;
 
-      color: var(--btnText);
+      color: var(--text);
       background-repeat: no-repeat, no-repeat;
 
       &:horizontal {
@@ -68,15 +67,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
+            linear-gradient(45deg, var(--text) 50%, transparent 51%),
-            linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
+            linear-gradient(-45deg, transparent 50%, var(--text) 51%);
           background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
         }
 
         &:decrement {
           background-image:
-            linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
+            linear-gradient(45deg, transparent 50%, var(--text) 51%),
-            linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
+            linear-gradient(-45deg, var(--text) 50%, transparent 51%);
           background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
         }
       }
@@ -86,15 +85,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
+            linear-gradient(-45deg, transparent 50%, var(--text) 51%),
-            linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
+            linear-gradient(45deg, transparent 50%, var(--text) 51%);
           background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
         }
 
         &:decrement {
           background-image:
-            linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
+            linear-gradient(-45deg, var(--text) 50%, transparent 51%),
-            linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
+            linear-gradient(45deg, var(--text) 50%, transparent 51%);
           background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
         }
       }

src/components/button.style.js

@@ -103,7 +103,7 @@ export default {
     {
       state: ['disabled'],
       directives: {
-        background: '$blend(--background, 0.25, --parent)',
+        background: '$blend(--inheritedBackground, 0.25, --parent)',
         shadow: [...buttonInsetFakeBorders]
       }
     },

src/components/panel.style.js

@@ -12,7 +12,8 @@ export default {
     'MenuItem',
     'Post',
     'Notification',
-    'Alert'
+    'Alert',
+    'UserCard'
   ],
   defaultRules: [
     {

src/components/popover.style.js

@@ -14,7 +14,8 @@ export default {
     'ButtonUnstyled',
     'Input',
     'MenuItem',
-    'Post'
+    'Post',
+    'UserCard'
   ],
   defaultRules: [
     {

src/components/root.style.js

@@ -5,6 +5,8 @@ export default {
     'Underlay',
     'Modals',
     'Popover',
-    'TopBar'
+    'TopBar',
+    'Scrollbar',
+    'ScrollbarElement'
   ]
 }

src/components/scrollbar.style.js

@@ -0,0 +1,11 @@
+export default {
+  name: 'Scrollbar',
+  selector: '::-webkit-scrollbar',
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg'
+      }
+    }
+  ]
+}

src/components/scrollbar_element.style.js

@@ -0,0 +1,101 @@
+const border = (top, shadow) => ({
+  x: 0,
+  y: top ? 1 : -1,
+  blur: 0,
+  spread: 0,
+  color: shadow ? '#000000' : '#FFFFFF',
+  alpha: 0.2,
+  inset: true
+})
+
+const buttonInsetFakeBorders = [border(true, false), border(false, true)]
+const inputInsetFakeBorders = [border(true, true), border(false, false)]
+const buttonOuterShadow = {
+  x: 0,
+  y: 0,
+  blur: 2,
+  spread: 0,
+  color: '#000000',
+  alpha: 1
+}
+
+const hoverGlow = {
+  x: 0,
+  y: 0,
+  blur: 4,
+  spread: 0,
+  color: '--text',
+  alpha: 1
+}
+
+export default {
+  name: 'ScrollbarElement',
+  selector: '::-webkit-scrollbar-button',
+  states: {
+    pressed: ':active',
+    hover: ':hover:not(:disabled)',
+    disabled: ':disabled'
+  },
+  validInnerComponents: [
+    'Text'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg',
+        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
+        roundness: 3
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        shadow: [hoverGlow, ...buttonInsetFakeBorders]
+      }
+    },
+    {
+      state: ['pressed'],
+      directives: {
+        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['hover', 'pressed'],
+      directives: {
+        shadow: [hoverGlow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['toggled'],
+      directives: {
+        background: '--accent,-24.2',
+        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['toggled', 'hover'],
+      directives: {
+        background: '--accent,-24.2',
+        shadow: [hoverGlow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['disabled'],
+      directives: {
+        background: '$blend(--inheritedBackground, 0.25, --parent)',
+        shadow: [...buttonInsetFakeBorders]
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Button',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}

src/components/underlay.style.js

@@ -11,7 +11,6 @@ export default {
   ],
   defaultRules: [
     {
-      component: 'Underlay',
       directives: {
         background: '#000000',
         opacity: 0.2

src/components/user_card/user_card.style.js

@@ -0,0 +1,40 @@
+export default {
+  name: 'UserCard',
+  selector: '.user-card',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Button',
+    'ButtonUnstyled',
+    'Input',
+    'RichContent',
+    'Alert'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        roundness: 3,
+        shadow: [{
+          x: 1,
+          y: 1,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }],
+        '--profileTint': '$alpha(--background, 0.5)'
+      }
+    },
+    {
+      parent: {
+        component: 'UserCard'
+      },
+      component: 'RichContent',
+      directives: {
+        opacity: 0
+      }
+    }
+  ]
+}

src/services/style_setter/style_setter.js

@@ -26,7 +26,21 @@ export const applyTheme = (input) => {
   styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
   themes3.css(themes3.eager).forEach(rule => {
-    styleSheet.insertRule(rule, 'index-max')
+    // Hack to support multiple selectors on same component
+    if (rule.match(/::-webkit-scrollbar-button/)) {
+      const parts = rule.split(/[{}]/g)
+      const newRule = [
+        parts[0],
+        ', ',
+        parts[0].replace(/button/, 'thumb'),
+        ' {',
+        parts[1],
+        '}'
+      ].join('')
+      styleSheet.insertRule(newRule, 'index-max')
+    } else {
+      styleSheet.insertRule(rule, 'index-max')
+    }
   })
   body.classList.remove('hidden')
   themes3.lazy.then(lazyRules => {

src/services/theme_data/theme_data_3.service.js

@@ -201,9 +201,12 @@ export const init = (extraRuleset, palette) => {
       } else {
         // TODO add support for --current prefix
         switch (variableSlot) {
-          case 'background':
+          case 'inheritedBackground':
             targetColor = convert(dynamicVars.inheritedBackground).rgb
             break
+          case 'background':
+            targetColor = convert(dynamicVars.background).rgb
+            break
           default:
             targetColor = convert(palette[variableSlot]).rgb
         }
@@ -222,6 +225,15 @@ export const init = (extraRuleset, palette) => {
         const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[a-zA-Z0-9-,.'"\s]*)\)/.exec(color).groups
         const args = argsString.split(/,/g).map(a => a.trim())
         switch (funcName) {
+          case 'alpha': {
+            if (args.length !== 2) {
+              throw new Error(`$alpha requires 2 arguments, ${args.length} were provided`)
+            }
+            const colorArg = convert(findColor(args[0], dynamicVars)).rgb
+            const amount = Number(args[1])
+            targetColor = { ...colorArg, a: amount }
+            break
+          }
           case 'blend': {
             if (args.length !== 3) {
               throw new Error(`$blend requires 3 arguments, ${args.length} were provided`)
@@ -374,7 +386,9 @@ export const init = (extraRuleset, palette) => {
 
       combination.component = component.name
       const soloSelector = ruleToSelector(combination, true)
+      const soloCssSelector = ruleToSelector(combination)
       const selector = [parentSelector, soloSelector].filter(x => x).join(' ')
+      const cssSelector = [parentSelector, soloCssSelector].filter(x => x).join(' ')
 
       const lowerLevelSelector = parentSelector
       const lowerLevelBackground = computed[lowerLevelSelector]?.background
@@ -399,6 +413,7 @@ export const init = (extraRuleset, palette) => {
 
       computed[selector] = computed[selector] || {}
       computed[selector].computedRule = computedRule
+      computed[selector].dynamicVars = dynamicVars
 
       if (virtualComponents.has(component.name)) {
         const virtualName = [
@@ -471,7 +486,7 @@ export const init = (extraRuleset, palette) => {
         }
 
         addRule({
-          selector,
+          selector: cssSelector,
           virtual: true,
           component: component.name,
           parent,
@@ -533,9 +548,11 @@ export const init = (extraRuleset, palette) => {
           computed[selector].background = { ...lowerLevelComputedBackground, a: 0 }
         }
 
+        computed[selector].dynamicVars.background = computed[selector].background
+
         if (addRuleNeeded) {
           addRule({
-            selector,
+            selector: cssSelector,
             component: component.name,
             ...combination,
             parent,
@@ -597,6 +614,7 @@ export const init = (extraRuleset, palette) => {
       let directives
       if (rule.component !== 'Root') {
         directives = Object.entries(rule.directives).map(([k, v]) => {
+          const selector = ruleToSelector(rule, true)
           switch (k) {
             case 'roundness': {
               return '  ' + [
@@ -617,7 +635,7 @@ export const init = (extraRuleset, palette) => {
                   '  --background: ' + v
                 ].join(';\n')
               }
-              const color = cssColorString(computed[ruleToSelector(rule, true)].background, rule.directives.opacity)
+              const color = cssColorString(computed[selector].background, rule.directives.opacity)
               return [
                 'background-color: ' + color,
                 '  --background: ' + color
@@ -627,7 +645,12 @@ export const init = (extraRuleset, palette) => {
               if (rule.directives.textNoCssColor === 'yes') { return '' }
               return 'color: ' + v
             }
-            default: return ''
+            default:
+              if (k.startsWith('--')) {
+                console.log('LOL', k, rgba2css(findColor(v, computed[selector].dynamicVars)))
+                return k + ': ' + rgba2css(findColor(v, computed[selector].dynamicVars))
+              }
+              return ''
           }
         }).filter(x => x).map(x => '  ' + x).join(';\n')
       } else {