1
0
mirror of https://git.pleroma.social/sjw/pleroma-fe.git synced 2024-12-23 05:25:28 +01:00

fonts support, cleanup

This commit is contained in:
Henry Jameson 2024-02-22 18:04:28 +02:00
parent 779b3dc122
commit 7d2faccd4f
13 changed files with 161 additions and 121 deletions

View File

@ -22,7 +22,7 @@ html {
body {
font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif);
font-family: var(--font);
margin: 0;
color: var(--text);
-webkit-font-smoothing: antialiased;
@ -130,12 +130,7 @@ i[class*="icon-"],
nav {
z-index: var(--ZI_navbar);
background-color: $fallback--fg;
background-color: var(--topBar, $fallback--fg);
color: $fallback--faint;
color: var(--faint, $fallback--faint);
box-shadow: 0 0 4px rgb(0 0 0 / 60%);
box-shadow: var(--topBarShadow);
box-shadow: var(--shadow);
box-sizing: border-box;
height: var(--navbar-height);
position: fixed;
@ -359,7 +354,7 @@ nav {
box-shadow: var(--shadow);
font-size: 1em;
font-family: sans-serif;
font-family: var(--interfaceFont, sans-serif);
font-family: var(--font);
&::-moz-focus-inner {
border: none;
@ -409,11 +404,8 @@ nav {
color: inherit;
&.-link {
color: var(--link);
}
&.-fullwidth {
width: 100%;
/* stylelint-disable-next-line declaration-no-important */
color: var(--link) !important;
}
}
@ -437,8 +429,7 @@ textarea {
border: none;
border-radius: var(--roundness);
box-shadow: var(--shadow);
font-family: sans-serif;
font-family: var(--inputFont, sans-serif);
font-family: var(--font);
font-size: 1em;
margin: 0;
box-sizing: border-box;
@ -466,9 +457,8 @@ textarea {
display: none;
&:checked + label::before {
box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset;
box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
background-color: var(--accent, $fallback--link);
box-shadow: var(--shadow);
background-color: var(--background);
}
&:disabled {
@ -523,11 +513,8 @@ textarea {
width: 1.1em;
height: 1.1em;
border-radius: var(--roundness);
box-shadow: 0 0 2px black inset;
box-shadow: var(--inputShadow);
box-shadow: var(--shadow);
margin-right: 0.5em;
background-color: $fallback--fg;
background-color: var(--input, $fallback--fg);
vertical-align: top;
text-align: center;
line-height: 1.1;
@ -551,7 +538,7 @@ textarea {
option {
color: var(--text);
background-color: var(--bg, $fallback--bg);
background-color: var(--background);
}
.hide-number-spinner {
@ -667,8 +654,7 @@ option {
.visibility-notice {
padding: 0.5em;
border: 1px solid $fallback--faint;
border: 1px solid var(--faint, $fallback--faint);
border: 1px solid var(--textFaint);
border-radius: var(--roundness);
}

View File

@ -37,6 +37,7 @@ export default {
},
{
directives: {
'--font': 'generic | inherit',
background: '--fg, -5',
roundness: 3,
shadow: [{

View File

@ -1,10 +1,10 @@
@import "../../variables";
.RichContent {
font-family: var(--font);
blockquote {
margin: 0.2em 0 0.2em 0.2em;
font-style: italic;
border-left: 0.2em solid var(--faint, $fallback--faint);
border-left: 0.2em solid var(--textFaint);
padding-left: 1em;
}
@ -17,7 +17,7 @@
kbd,
var,
pre {
font-family: var(--postCodeFont, monospace);
font-family: var(--monoFont);
}
p {

View File

@ -9,6 +9,8 @@ export default {
defaultRules: [
{
directives: {
'--font': 'generic | inherit',
'--monoFont': 'generic | monospace',
textNoCssColor: 'yes'
}
}

View File

@ -9,5 +9,12 @@ export default {
'Scrollbar',
'ScrollbarElement',
'MobileDrawer'
],
defaultRules: [
{
directives: {
'--font': 'generic | sans-serif'
}
}
]
}

View File

@ -32,12 +32,10 @@ label.Select {
appearance: none;
background: transparent;
border: none;
color: $fallback--text;
color: var(--inputText, --text, $fallback--text);
color: var(--text);
margin: 0;
padding: 0 2em 0 0.2em;
font-family: sans-serif;
font-family: var(--inputFont, sans-serif);
font-family: var(--font);
font-size: 1em;
width: 100%;
z-index: 1;
@ -53,7 +51,7 @@ label.Select {
height: 100%;
width: 0.875em;
color: $fallback--text;
color: var(--inputText, $fallback--text);
font-family: var(--font);
line-height: 2;
z-index: 0;
pointer-events: none;

View File

@ -25,12 +25,11 @@
.mfa-backup-codes {
.warning {
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
color: var(--cOrange);
}
.backup-codes {
font-family: var(--postCodeFont, monospace);
font-family: var(--monoFont);
}
}
</style>

View File

@ -1,5 +1,3 @@
@import "../../variables";
.StatusBody {
display: flex;
flex-direction: column;
@ -14,7 +12,6 @@
& .text,
& .summary {
font-family: var(--postFont, sans-serif);
white-space: pre-wrap;
overflow-wrap: break-word;
word-wrap: break-word;
@ -41,7 +38,7 @@
margin-bottom: 0.5em;
border-style: solid;
border-width: 0 0 1px;
border-color: var(--border, $fallback--border);
border-color: var(--border);
flex-grow: 0;
&.-tall {

View File

@ -177,7 +177,7 @@
cursor: pointer;
box-shadow: var(--shadow);
font-size: 1em;
font-family: var(--interfaceFont, sans-serif);
font-family: var(--font);
border-radius: var(--roundness);
position: relative;
white-space: nowrap;

View File

@ -6,25 +6,22 @@ import { getCssRules } from '../theme_data/css_utils.js'
import { defaultState } from '../../modules/config.js'
export const applyTheme = (input) => {
console.log({ ...input })
let extraRules
let fonts
if (input.themeType !== 1) {
const t0 = performance.now()
const { rules, theme } = generatePreset(input)
fonts = rules.fonts
const { theme } = generatePreset(input)
const t1 = performance.now()
console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
console.debug('Themes 2 initialization took ' + (t1 - t0) + 'ms')
extraRules = convertTheme2To3(theme)
} else {
console.log(input)
console.debug(input)
extraRules = convertTheme2To3(input)
}
const t1 = performance.now()
const themes3 = init(extraRules, '#FFFFFF')
const t2 = performance.now()
console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
console.debug('Themes 3 (eager) initialization took ' + (t2 - t1) + 'ms')
const head = document.head
const body = document.body
body.classList.add('hidden')
@ -33,8 +30,6 @@ export const applyTheme = (input) => {
head.appendChild(styleEl)
const styleSheet = styleEl.sheet
styleSheet.toString()
styleSheet.insertRule(`:root { ${fonts} }`, 'index-max')
getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
// Hack to support multiple selectors on same component
if (rule.match(/::-webkit-scrollbar-button/)) {
@ -58,7 +53,7 @@ export const applyTheme = (input) => {
styleSheet.insertRule(rule, 'index-max')
})
const t3 = performance.now()
console.log('Themes 3 finalization took ' + (t3 - t2) + 'ms')
console.debug('Themes 3 finalization (lazy) took ' + (t3 - t2) + 'ms')
})
}

View File

@ -1,6 +1,6 @@
import { convert } from 'chromatism'
import { rgba2css } from '../color_convert/color_convert.js'
import { hex2rgb, rgba2css } from '../color_convert/color_convert.js'
// This changes what backgrounds are used to "stacked" solid colors so you can see
// what theme engine "thinks" is actual background color is for purposes of text color
@ -78,72 +78,79 @@ export const getCssRules = (rules) => rules.map(rule => {
return ' ' + k + ': ' + v
}).join(';\n')
let directives
if (rule.component !== 'Root') {
directives = Object.entries(rule.directives).map(([k, v]) => {
switch (k) {
case 'roundness': {
return ' ' + [
'--roundness: ' + v + 'px'
].join(';\n ')
}
case 'shadow': {
return ' ' + [
'--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
'--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
'--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
].join(';\n ')
}
case 'background': {
if (DEBUG) {
return `
--background: ${getCssColorString(rule.dynamicVars.stacked)};
background-color: ${getCssColorString(rule.dynamicVars.stacked)};
`
}
if (v === 'transparent') {
return [
rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
' --background: ' + v
].filter(x => x).join(';\n')
}
const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
const cssDirectives = ['--background: ' + color]
if (rule.directives.backgroundNoCssColor !== 'yes') {
cssDirectives.push('background-color: ' + color)
}
return cssDirectives.filter(x => x).join(';\n')
}
case 'blur': {
const cssDirectives = []
if (rule.directives.opacity < 1) {
cssDirectives.push(`--backdrop-filter: blur(${v}) `)
if (rule.directives.backgroundNoCssColor !== 'yes') {
cssDirectives.push(`backdrop-filter: blur(${v}) `)
}
}
return cssDirectives.join(';\n')
}
case 'textColor': {
if (rule.directives.textNoCssColor === 'yes') { return '' }
return 'color: ' + v
}
default:
if (k.startsWith('--')) {
const [type] = v.split('|').map(x => x.trim()) // woah, Extreme!
switch (type) {
case 'color':
return k + ': ' + rgba2css(rule.dynamicVars[k])
default:
return ''
}
}
return ''
const directives = Object.entries(rule.directives).map(([k, v]) => {
switch (k) {
case 'roundness': {
return ' ' + [
'--roundness: ' + v + 'px'
].join(';\n ')
}
}).filter(x => x).map(x => ' ' + x).join(';\n')
} else {
directives = {}
}
case 'shadow': {
return ' ' + [
'--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
'--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
'--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
].join(';\n ')
}
case 'background': {
if (DEBUG) {
return `
--background: ${getCssColorString(rule.dynamicVars.stacked)};
background-color: ${getCssColorString(rule.dynamicVars.stacked)};
`
}
if (v === 'transparent') {
if (rule.component === 'Root') return []
return [
rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
' --background: ' + v
].filter(x => x).join(';\n')
}
const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
const cssDirectives = ['--background: ' + color]
if (rule.directives.backgroundNoCssColor !== 'yes') {
cssDirectives.push('background-color: ' + color)
}
return cssDirectives.filter(x => x).join(';\n')
}
case 'blur': {
const cssDirectives = []
if (rule.directives.opacity < 1) {
cssDirectives.push(`--backdrop-filter: blur(${v}) `)
if (rule.directives.backgroundNoCssColor !== 'yes') {
cssDirectives.push(`backdrop-filter: blur(${v}) `)
}
}
return cssDirectives.join(';\n')
}
case 'font': {
return 'font-family: ' + v
}
case 'textColor': {
if (rule.directives.textNoCssColor === 'yes') { return '' }
return 'color: ' + v
}
default:
if (k.startsWith('--')) {
const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
switch (type) {
case 'color': {
const color = rule.dynamicVars[k]
if (typeof color === 'string') {
return k + ': ' + rgba2css(hex2rgb(color))
} else {
return k + ': ' + rgba2css(color)
}
}
case 'generic':
return k + ': ' + value
default:
return ''
}
}
return ''
}
}).filter(x => x).map(x => ' ' + x).join(';\n')
return [
header,

View File

@ -14,6 +14,13 @@ export const basePaletteKeys = new Set([
'cOrange'
])
export const fontsKeys = new Set([
'interface',
'input',
'post',
'postCode'
])
export const opacityKeys = new Set([
'alert',
'alertPopup',
@ -249,6 +256,40 @@ export const convertTheme2To3 = (data) => {
return newRules
}
const convertFonts = () => {
const newRules = []
Object.keys(data.fonts).forEach(key => {
if (!fontsKeys.has(key)) return
const originalFont = data.fonts[key].family
const rule = {}
switch (key) {
case 'interface':
case 'postCode':
rule.component = 'Root'
break
case 'input':
rule.component = 'Input'
break
case 'post':
rule.component = 'RichContent'
break
}
switch (key) {
case 'interface':
case 'input':
case 'post':
rule.directives = { '--font': 'generic | ' + originalFont }
break
case 'postCode':
rule.directives = { '--monoFont': 'generic | ' + originalFont }
newRules.push({ ...rule, component: 'RichContent' })
break
}
newRules.push(rule)
})
return newRules
}
const convertShadows = () => {
const newRules = []
Object.keys(data.shadows).forEach(key => {
@ -457,5 +498,5 @@ export const convertTheme2To3 = (data) => {
const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x).reduce((acc, x) => [...acc, ...x], [])
return [generateRoot(), ...convertShadows(), ...convertRadii(), ...convertOpacity(), ...flatExtRules]
return [generateRoot(), ...convertShadows(), ...convertRadii(), ...convertOpacity(), ...convertFonts(), ...flatExtRules]
}

View File

@ -411,6 +411,13 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
}
break
}
case 'generic': {
dynamicVars[k] = value
if (component.name === 'Root') {
staticVars[k.substring(2)] = value
}
break
}
}
})
@ -454,9 +461,9 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
}
processInnerComponent(components.Root, eagerRules)
console.log('TOTAL COMBOS: ' + counter)
console.debug('Eager combinations processed:' + counter)
const lazyExec = Promise.all(promises).then(() => {
console.log('TOTAL COMBOS: ' + counter)
console.debug('Total combinations processed: ' + counter)
}).then(() => lazyRules)
return {