commit: 7d2faccd4f62e8ff6c2f6cc9b8b11d890a6ab974
parent 779b3dc1228030740ccfbd5192bcd368b526ce56
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 18:04:28 +0200
fonts support, cleanup
Diffstat:
13 files changed, 154 insertions(+), 114 deletions(-)
diff --git a/src/App.scss b/src/App.scss
@@ -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);
}
diff --git a/src/components/input.style.js b/src/components/input.style.js
@@ -37,6 +37,7 @@ export default {
},
{
directives: {
+ '--font': 'generic | inherit',
background: '--fg, -5',
roundness: 3,
shadow: [{
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
@@ -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 {
diff --git a/src/components/rich_content/rich_content.style.js b/src/components/rich_content/rich_content.style.js
@@ -9,6 +9,8 @@ export default {
defaultRules: [
{
directives: {
+ '--font': 'generic | inherit',
+ '--monoFont': 'generic | monospace',
textNoCssColor: 'yes'
}
}
diff --git a/src/components/root.style.js b/src/components/root.style.js
@@ -9,5 +9,12 @@ export default {
'Scrollbar',
'ScrollbarElement',
'MobileDrawer'
+ ],
+ defaultRules: [
+ {
+ directives: {
+ '--font': 'generic | sans-serif'
+ }
+ }
]
}
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
@@ -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;
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
@@ -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>
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
@@ -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 {
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
@@ -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;
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
@@ -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')
})
}
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
@@ -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 ')
+ const 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)};
+ `
}
- case 'shadow': {
- return ' ' + [
- '--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
- '--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
- '--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
- ].join(';\n ')
+ if (v === 'transparent') {
+ if (rule.component === 'Root') return []
+ return [
+ rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
+ ' --background: ' + v
+ ].filter(x => x).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]
+ 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('background-color: ' + color)
+ cssDirectives.push(`backdrop-filter: blur(${v}) `)
}
- 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 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')
- } else {
- directives = {}
- }
+ return ''
+ }
+ }).filter(x => x).map(x => ' ' + x).join(';\n')
return [
header,
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
@@ -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]
}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
@@ -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 {
