qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

better vars nomenclature

Browse source
This commit is contained in:
Henry Jameson 2024-10-06 14:10:19 +03:00
parent 7e684ea3ff
commit da2c016ab4
3 changed files with 24 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/components/button.style.js
View file

@ -35,11 +35,11 @@ export default {
{ {
component: 'Root', component: 'Root',
directives: { directives: {
'--defaultButtonHoverGlow': 'shadow | 0 0 4 --text / 0.5', '--buttonDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
'--defaultButtonFocusGlow': 'shadow | 0 0 4 4 --link / 0.5', '--buttonDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5',
'--defaultButtonShadow': 'shadow | 0 0 2 #000000', '--buttonDefaultShadow': 'shadow | 0 0 2 #000000',
'--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)', '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)',
'--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)' '--buttonPressedBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)'
} }
}, },
{ {
@ -47,53 +47,53 @@ export default {
// like within it // like within it
directives: { directives: {
background: '--fg', background: '--fg',
shadow: ['--defaultButtonShadow', '--defaultButtonBevel'], shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel'],
roundness: 3 roundness: 3
} }
}, },
{ {
state: ['hover'], state: ['hover'],
directives: { directives: {
shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel'] shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel']
} }
}, },
{ {
state: ['focused'], state: ['focused'],
directives: { directives: {
shadow: ['--defaultButtonFocusGlow', '--defaultButtonBevel'] shadow: ['--buttonDefaultFocusGlow', '--buttonDefaultBevel']
} }
}, },
{ {
state: ['pressed'], state: ['pressed'],
directives: { directives: {
shadow: ['--defaultButtonShadow', '--pressedButtonBevel'] shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
} }
}, },
{ {
state: ['pressed', 'hover'], state: ['pressed', 'hover'],
directives: { directives: {
shadow: ['--pressedButtonBevel', '--defaultButtonHoverGlow'] shadow: ['--buttonPressedBevel', '--buttonDefaultHoverGlow']
} }
}, },
{ {
state: ['toggled'], state: ['toggled'],
directives: { directives: {
background: '--inheritedBackground,-14.2', background: '--inheritedBackground,-14.2',
shadow: ['--defaultButtonShadow', '--pressedButtonBevel'] shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
} }
}, },
{ {
state: ['toggled', 'hover'], state: ['toggled', 'hover'],
directives: { directives: {
background: '--inheritedBackground,-14.2', background: '--inheritedBackground,-14.2',
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel'] shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
} }
}, },
{ {
state: ['disabled'], state: ['disabled'],
directives: { directives: {
background: '$blend(--inheritedBackground 0.25 --parent)', background: '$blend(--inheritedBackground 0.25 --parent)',
shadow: ['--defaultButtonBevel'] shadow: ['--buttonDefaultBevel']
} }
}, },
{ {

14
src/components/input.style.js
View file

@ -18,9 +18,9 @@ export default {
{ {
component: 'Root', component: 'Root',
directives: { directives: {
'--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)', '--inputDefaultBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
'--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5', '--inputDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
'--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5' '--inputDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
} }
}, },
{ {
@ -41,25 +41,25 @@ export default {
spread: 0, spread: 0,
color: '#000000', color: '#000000',
alpha: 1 alpha: 1
}, '--defaultInputBevel'] }, '--inputDefaultBevel']
} }
}, },
{ {
state: ['hover'], state: ['hover'],
directives: { directives: {
shadow: ['--defaultInputHoverGlow', '--defaultInputBevel'] shadow: ['--inputDefaultHoverGlow', '--inputDefaultBevel']
} }
}, },
{ {
state: ['focused'], state: ['focused'],
directives: { directives: {
shadow: ['--defaultInputFocusGlow', '--defaultInputBevel'] shadow: ['--inputDefaultFocusGlow', '--inputDefaultBevel']
} }
}, },
{ {
state: ['focused', 'hover'], state: ['focused', 'hover'],
directives: { directives: {
shadow: ['--defaultInputFocusGlow', '--defaultInputHoverGlow', '--defaultInputBevel'] shadow: ['--inputDefaultFocusGlow', '--inputDefaultHoverGlow', '--inputDefaultBevel']
} }
}, },
{ {

8
src/components/tab_switcher/tab.style.js
View file

@ -14,14 +14,14 @@ export default {
{ {
directives: { directives: {
background: '--fg', background: '--fg',
shadow: ['--defaultButtonShadow', '--defaultButtonBevel'], shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel'],
roundness: 3 roundness: 3
} }
}, },
{ {
state: ['hover'], state: ['hover'],
directives: { directives: {
shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel'] shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel']
} }
}, },
{ {
@ -33,14 +33,14 @@ export default {
{ {
state: ['hover', 'active'], state: ['hover', 'active'],
directives: { directives: {
shadow: ['--defaultButtonShadow', '--defaultButtonBevel'] shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel']
} }
}, },
{ {
state: ['disabled'], state: ['disabled'],
directives: { directives: {
background: '$blend(--inheritedBackground 0.25 --parent)', background: '$blend(--inheritedBackground 0.25 --parent)',
shadow: ['--defaultButtonBevel'] shadow: ['--buttonDefaultBevel']
} }
}, },
{ {