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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -6,25 +6,22 @@ import { getCssRules } from '../theme_data/css_utils.js'
import { defaultState } from '../../modules/config.js' import { defaultState } from '../../modules/config.js'
export const applyTheme = (input) => { export const applyTheme = (input) => {
console.log({ ...input })
let extraRules let extraRules
let fonts
if (input.themeType !== 1) { if (input.themeType !== 1) {
const t0 = performance.now() const t0 = performance.now()
const { rules, theme } = generatePreset(input) const { theme } = generatePreset(input)
fonts = rules.fonts
const t1 = performance.now() 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) extraRules = convertTheme2To3(theme)
} else { } else {
console.log(input) console.debug(input)
extraRules = convertTheme2To3(input) extraRules = convertTheme2To3(input)
} }
const t1 = performance.now() const t1 = performance.now()
const themes3 = init(extraRules, '#FFFFFF') const themes3 = init(extraRules, '#FFFFFF')
const t2 = performance.now() 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 head = document.head
const body = document.body const body = document.body
body.classList.add('hidden') body.classList.add('hidden')
@ -33,8 +30,6 @@ export const applyTheme = (input) => {
head.appendChild(styleEl) head.appendChild(styleEl)
const styleSheet = styleEl.sheet const styleSheet = styleEl.sheet
styleSheet.toString()
styleSheet.insertRule(`:root { ${fonts} }`, 'index-max')
getCssRules(themes3.eager, themes3.staticVars).forEach(rule => { getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
// Hack to support multiple selectors on same component // Hack to support multiple selectors on same component
if (rule.match(/::-webkit-scrollbar-button/)) { if (rule.match(/::-webkit-scrollbar-button/)) {
@ -58,7 +53,7 @@ export const applyTheme = (input) => {
styleSheet.insertRule(rule, 'index-max') styleSheet.insertRule(rule, 'index-max')
}) })
const t3 = performance.now() 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 { 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 // 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 // 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 return ' ' + k + ': ' + v
}).join(';\n') }).join(';\n')
let directives const directives = Object.entries(rule.directives).map(([k, v]) => {
if (rule.component !== 'Root') { switch (k) {
directives = Object.entries(rule.directives).map(([k, v]) => { case 'roundness': {
switch (k) { return ' ' + [
case 'roundness': { '--roundness: ' + v + 'px'
return ' ' + [ ].join(';\n ')
'--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 ''
} }
}).filter(x => x).map(x => ' ' + x).join(';\n') case 'shadow': {
} else { return ' ' + [
directives = {} '--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 [ return [
header, header,

View File

@ -14,6 +14,13 @@ export const basePaletteKeys = new Set([
'cOrange' 'cOrange'
]) ])
export const fontsKeys = new Set([
'interface',
'input',
'post',
'postCode'
])
export const opacityKeys = new Set([ export const opacityKeys = new Set([
'alert', 'alert',
'alertPopup', 'alertPopup',
@ -249,6 +256,40 @@ export const convertTheme2To3 = (data) => {
return newRules 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 convertShadows = () => {
const newRules = [] const newRules = []
Object.keys(data.shadows).forEach(key => { 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], []) 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 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) processInnerComponent(components.Root, eagerRules)
console.log('TOTAL COMBOS: ' + counter) console.debug('Eager combinations processed:' + counter)
const lazyExec = Promise.all(promises).then(() => { const lazyExec = Promise.all(promises).then(() => {
console.log('TOTAL COMBOS: ' + counter) console.debug('Total combinations processed: ' + counter)
}).then(() => lazyRules) }).then(() => lazyRules)
return { return {