Merge branch 'themes-3-1' into shigusegubu-themes3

This commit is contained in:
Henry Jameson 2025-08-10 23:39:49 +03:00
commit 41add4fc6a
20 changed files with 30 additions and 223 deletions

View file

@ -0,0 +1 @@
Reduced time taken processing theme by half

View file

@ -1,27 +0,0 @@
export default {
name: 'Attachment',
selector: '.Attachment',
notEditable: true,
validInnerComponents: [
'Border',
'Button',
'Input'
],
defaultRules: [
{
directives: {
roundness: 3
}
},
{
component: 'Button',
parent: {
component: 'Attachment'
},
directives: {
background: '#FFFFFF',
opacity: 0.5
}
}
]
}

View file

@ -8,9 +8,6 @@ export default {
'Text',
'Icon',
'Border',
'Button',
'RichContent',
'Attachment',
'PollGraph'
],
defaultRules: [

View file

@ -1,48 +0,0 @@
export default {
name: 'ListItem',
selector: '.list-item',
states: {
active: '.-active',
hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.-non-interactive)'
},
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'RichContent',
'Input',
'Avatar'
],
defaultRules: [
{
directives: {
background: '--bg',
opacity: 0
}
},
{
state: ['active'],
directives: {
background: '--inheritedBackground, 10',
opacity: 1
}
},
{
state: ['hover'],
directives: {
background: '--inheritedBackground, 10',
opacity: 1
}
},
{
state: ['hover', 'active'],
directives: {
background: '--inheritedBackground, 20',
opacity: 1
}
}
]
}

View file

@ -4,11 +4,7 @@ export default {
validInnerComponents: [
'Text',
'Icon',
'Input',
'Border',
'ButtonUnstyled',
'Badge',
'Avatar'
'Border'
],
states: {
hover: ':is(:hover, :focus-visible, :has(:focus-visible)):not(.disabled)',

View file

@ -2,18 +2,7 @@ export default {
name: 'MobileDrawer',
selector: '.mobile-drawer',
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'Input',
'PanelHeader',
'MenuItem',
'Notification',
'Alert',
'UserCard'
'MenuItem'
],
defaultRules: [
{
@ -21,21 +10,6 @@ export default {
background: '--bg',
backgroundNoCssColor: 'yes'
}
},
{
component: 'PanelHeader',
parent: { component: 'MobileDrawer' },
directives: {
background: '--fg',
shadow: [{
x: 0,
y: 0,
blur: 4,
spread: 0,
color: '#000000',
alpha: 0.6
}]
}
}
]
}

View file

@ -6,12 +6,7 @@ export default {
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'RichContent',
'Input',
'Avatar',
'Attachment',
'PollGraph'
],
defaultRules: []

View file

@ -6,29 +6,17 @@ export default {
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'Input',
'PanelHeader',
'MenuItem',
'Post',
'Notification',
'Alert',
'UserCard',
'Chat',
'Attachment',
'Tab',
'ListItem'
'MenuItem'
],
validInnerComponentsLite: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'Input',
'PanelHeader',
'Alert'
'PanelHeader'
],
defaultRules: [
{

View file

@ -7,9 +7,7 @@ export default {
'Icon',
'Button',
'ButtonUnstyled',
'Badge',
'Alert',
'Avatar'
'Alert'
],
defaultRules: [
{

View file

@ -6,16 +6,7 @@ export default {
modal: '.modal'
},
validInnerComponents: [
'Text',
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'Input',
'MenuItem',
'Post',
'UserCard'
'MenuItem'
],
defaultRules: [
{

View file

@ -2,6 +2,7 @@
font-family: var(--font);
&.-faint {
color: var(--text);
/* stylelint-disable declaration-no-important */
--text: var(--textFaint) !important;
--link: var(--linkFaint) !important;

View file

@ -1,20 +0,0 @@
export default {
name: 'RichContent',
selector: '.RichContent',
notEditable: true,
transparent: true,
validInnerComponents: [
'Text',
'FunText',
'Link'
],
defaultRules: [
{
directives: {
'--font': 'generic | inherit',
'--monoFont': 'generic | monospace',
textNoCssColor: 'yes'
}
}
]
}

View file

@ -9,23 +9,9 @@ export default {
'Link',
'Icon',
'Border',
'Button',
'ButtonUnstyled',
'RichContent',
'Input',
'Avatar',
'Attachment',
'PollGraph'
],
validInnerComponentsLite: [
'Text',
'Link',
'Icon',
'Border',
'ButtonUnstyled',
'RichContent',
'Avatar'
],
defaultRules: [
{
directives: {

View file

@ -5,6 +5,7 @@ export default {
'Link',
'Text',
'Icon',
// Optimization: don't put heavy components unless needed
'Button',
'ButtonUnstyled',
'Input',

View file

@ -111,15 +111,20 @@
}
}
.banner-overlay,
.banner-image {
.header-overlay {
position: absolute;
inset: 0;
right: -1.2em;
left: -1.2em;
top: -1.4em;
padding: 0;
mask: linear-gradient(to top, transparent 0, white 5em) bottom no-repeat;
}
.banner-overlay,
.banner-image {
position: absolute;
inset: 0;
padding: 0;
border-top-left-radius: calc(var(--roundness) - 1px);
border-top-right-radius: calc(var(--roundness) - 1px);
}
@ -136,6 +141,7 @@
.banner-overlay {
background-color: var(--profileTint);
opacity: 0.5;
pointer-events: none; // let user copy bg url
z-index: -1;
}

View file

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

View file

@ -3,16 +3,18 @@
<div class="user-card-inner">
<div class="user-info">
<div class="user-identity">
<div class="banner-image">
<img
:src="bannerImgSrc"
<div class="header-overlay">
<div class="banner-image">
<img
:src="bannerImgSrc"
:class="{ 'hide-bio': hideBio }"
>
</div>
<div
class="banner-overlay"
:class="{ 'hide-bio': hideBio }"
>
/>
</div>
<div
class="banner-overlay"
:class="{ 'hide-bio': hideBio }"
/>
<a
v-if="avatarAction === 'zoom'"
class="user-info-avatar -link"

View file

@ -86,7 +86,7 @@ export const generateTheme = (inputRuleset, callbacks, debug) => {
const themes3 = init({
inputRuleset,
debug
debug: true
})
getCssRules(themes3.eager, debug).forEach(rule => {

View file

@ -244,9 +244,6 @@ export const convertTheme2To3 = (data) => {
case 'tooltip':
rule.component = 'Popover'
break
case 'attachment':
rule.component = 'Attachment'
break
case 'ChatMessage':
rule.component = 'Button'
break

View file

@ -33,7 +33,6 @@ const components = {
Icon: null,
Border: null,
PanelHeader: null,
Attachment: null,
Panel: null,
Chat: null,
ChatMessage: null,