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

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
+      }
+    }
+  ]
+}