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

This commit is contained in:
Henry Jameson 2024-02-18 20:11:06 +02:00
parent 3e198526e6
commit 13a289ac74
11 changed files with 214 additions and 23 deletions

View File

@ -49,9 +49,8 @@ body {
&::-webkit-scrollbar-button, &::-webkit-scrollbar-button,
&::-webkit-scrollbar-thumb { &::-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 // horizontal/vertical/increment/decrement are webkit-specific stuff
@ -60,7 +59,7 @@ body {
&::-webkit-scrollbar-button { &::-webkit-scrollbar-button {
--___bgPadding: 2px; --___bgPadding: 2px;
color: var(--btnText); color: var(--text);
background-repeat: no-repeat, no-repeat; background-repeat: no-repeat, no-repeat;
&:horizontal { &:horizontal {
@ -68,15 +67,15 @@ body {
&:increment { &:increment {
background-image: 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); background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
} }
&:decrement { &:decrement {
background-image: 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); background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
} }
} }
@ -86,15 +85,15 @@ body {
&:increment { &:increment {
background-image: 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%; background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
} }
&:decrement { &:decrement {
background-image: 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%; background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
} }
} }

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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'
}
}
]
}

View File

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

View File

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

View File

@ -26,7 +26,21 @@ export const applyTheme = (input) => {
styleSheet.toString() styleSheet.toString()
styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max') styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
themes3.css(themes3.eager).forEach(rule => { 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') body.classList.remove('hidden')
themes3.lazy.then(lazyRules => { themes3.lazy.then(lazyRules => {

View File

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