commit: 13a289ac74206ada74c329b721584b810ef1b9ef
parent 3e198526e66b88301882b14240f0d50b8819b520
Author: Henry Jameson <me@hjkos.com>
Date: Sun, 18 Feb 2024 20:11:06 +0200
fixed oot selectors not working, added support for (webkit) scrollbars
Diffstat:
11 files changed, 214 insertions(+), 23 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -49,9 +49,8 @@ body {
&::-webkit-scrollbar-button,
&::-webkit-scrollbar-thumb {
- background-color: var(--btn);
- box-shadow: var(--buttonShadow);
- border-radius: var(--btnRadius);
+ box-shadow: var(--shadow);
+ border-radius: var(--roundness);
}
// 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, transparent 50%, var(--btnText) 51%);
+ linear-gradient(45deg, var(--text) 50%, transparent 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, var(--btnText) 50%, transparent 51%);
+ linear-gradient(45deg, transparent 50%, var(--text) 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(--btnText) 51%);
+ linear-gradient(-45deg, transparent 50%, var(--text) 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(--btnText) 50%, transparent 51%);
+ linear-gradient(-45deg, var(--text) 50%, transparent 51%),
+ linear-gradient(45deg, var(--text) 50%, transparent 51%);
background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
}
}
diff --git a/src/components/button.style.js b/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]
}
},
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
@@ -12,7 +12,8 @@ export default {
'MenuItem',
'Post',
'Notification',
- 'Alert'
+ 'Alert',
+ 'UserCard'
],
defaultRules: [
{
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
@@ -14,7 +14,8 @@ export default {
'ButtonUnstyled',
'Input',
'MenuItem',
- 'Post'
+ 'Post',
+ 'UserCard'
],
defaultRules: [
{
diff --git a/src/components/root.style.js b/src/components/root.style.js
@@ -5,6 +5,8 @@ export default {
'Underlay',
'Modals',
'Popover',
- 'TopBar'
+ 'TopBar',
+ 'Scrollbar',
+ 'ScrollbarElement'
]
}
diff --git a/src/components/scrollbar.style.js b/src/components/scrollbar.style.js
@@ -0,0 +1,11 @@
+export default {
+ name: 'Scrollbar',
+ selector: '::-webkit-scrollbar',
+ defaultRules: [
+ {
+ directives: {
+ background: '--bg'
+ }
+ }
+ ]
+}
diff --git a/src/components/scrollbar_element.style.js b/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'
+ }
+ }
+ ]
+}
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
@@ -11,7 +11,6 @@ export default {
],
defaultRules: [
{
- component: 'Underlay',
directives: {
background: '#000000',
opacity: 0.2
diff --git a/src/components/user_card/user_card.style.js b/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
+ }
+ }
+ ]
+}
diff --git a/src/services/style_setter/style_setter.js b/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 => {
diff --git a/src/services/theme_data/theme_data_3.service.js b/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 {
