mirror/tabby
2
0
Fork 0
mirror of https://github.com/Eugeny/tabby.git synced 2025-02-23 14:59:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

ui: new theme contrast fixes - fixed #8128

Browse Source
This commit is contained in:
Eugene Pankov 2023-03-23 23:16:46 +01:00
parent a22f9a8b43
commit 01953ff064
No known key found for this signature in database
GPG Key ID: 5896FCBBDD1CF4F4
5 changed files with 57 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
tabby-core/src/components/selectorModal.component.pug
View File

@ -26,9 +26,9 @@
*ngIf='option.description !== getOptionText(option)'
) {{option.description}}
.ms-auto
.no-wrap.badge.text-bg-secondary.text-muted.ms-2(*ngIf='selectedIndex == i && canEditSelected()')
span Backspace
.no-wrap.badge.text-bg-secondary.ms-2(*ngIf='selectedIndex == i && canEditSelected()')
span BACKSPACE
i.fas.fa-pencil.ms-1
.no-wrap.badge.text-bg-secondary.text-muted.ms-2(*ngIf='selectedIndex == i')
span Enter
.no-wrap.badge.text-bg-secondary.ms-2(*ngIf='selectedIndex == i')
span ENTER
i.fas.fa-arrow-right.ms-1

31
tabby-core/src/services/themes.service.ts
View File

@ -126,7 +126,7 @@ export class ThemesService {
vars[`--theme-${key}`] = color
vars[`--theme-${key}-less`] = less(color, 0.25).string()
vars[`--theme-${key}-less-2`] = less(color, 0.75).string()
vars[`--theme-${key}-fg`] = more(color, 1).string()
vars[`--theme-${key}-fg`] = more(color, 3).string()
contrastPairs.push([`--theme-${key}`, `--theme-${key}-fg`])
}
@ -141,17 +141,8 @@ export class ThemesService {
const colorBg = Color(vars[bg]).hsl()
const colorFg = Color(vars[fg]).hsl()
const bgContrast = colorBg.contrast(colorFg)
const isLightBG = colorBg.luminosity() > colorFg.luminosity()
if (bgContrast < this.config.store.terminal.minimumContrastRatio) {
const targetLuminosityDarkFG = (colorBg.luminosity() + 0.05) / this.config.store.terminal.minimumContrastRatio - 0.05
const targetLuminosityLightFG = (colorBg.luminosity() + 0.05) * this.config.store.terminal.minimumContrastRatio - 0.05
let candidateLuminosities = isLightBG ? [targetLuminosityDarkFG, targetLuminosityLightFG] : [targetLuminosityLightFG, targetLuminosityDarkFG]
candidateLuminosities = candidateLuminosities.map(x => Math.max(0, Math.min(1, x)))
const targetLuminosity = candidateLuminosities.reduce((a, b) => Math.abs(b - colorBg.luminosity()) < Math.abs(a - colorBg.luminosity()) ? a : b, colorFg.color[2] / 100)
colorFg.color[2] = targetLuminosity * 100
vars[fg] = colorFg
vars[fg] = this.ensureContrast(colorFg, colorBg).string()
}
}
@ -162,6 +153,24 @@ export class ThemesService {
document.body.classList.toggle('no-animations', !this.config.store.accessibility.animations)
}
private ensureContrast (color: Color, against: Color): Color {
const a = this.increaseContrast(color, against, 1.1)
const b = this.increaseContrast(color, against, 0.9)
return a.contrast(against) > b.contrast(against) ? a : b
}
private increaseContrast (color: Color, against: Color, step=1.1): Color {
color = color.hsl()
color.color[2] = Math.max(color.color[2], 0.01)
while (
(step < 1 && color.color[2] > 1 ||
step > 1 && color.color[2] < 99) &&
color.contrast(against) < this.config.store.terminal.minimumContrastRatio) {
color.color[2] *= step
}
return color
}
findTheme (name: string): Theme|null {
return this.config.enabledServices(this.themes).find(x => x.name === name) ?? null
}

14
tabby-core/src/theme.new.scss
View File

@ -57,9 +57,6 @@ app-root {
&.active {
color: var(--theme-fg-less-2);
background: var(--bs-body-bg);
border-left: 1px solid var(--theme-bg-less);
border-right: 1px solid var(--theme-bg-less);
}
}
}
@ -84,7 +81,7 @@ $form-switch-width: 2.5em;
body {
--bs-border-color: var(--theme-bg-more-2);
--bs-form-control-bg: var(--theme-bg-more);
--bs-form-control-bg: var(--theme-bg-more-2);
--bs-emphasis-color: var(--theme-fg-less-2);
}
@ -123,8 +120,8 @@ body {
.nav-pills {
--bs-nav-pills-border-radius: #{$nav-pills-border-radius};
--bs-nav-pills-link-active-color: var(--theme-bg-more);
--bs-nav-pills-link-active-bg: var(--bs-primary);
--bs-nav-pills-link-active-color: var(--theme-primary-fg);
--bs-nav-pills-link-active-bg: var(--theme-primary);
}
.nav-tabs {
@ -190,8 +187,8 @@ tab-body {
--bs-btn-hover-border-color: var(--theme-#{$color}-less);
--bs-btn-hover-bg: var(--theme-#{$color}-less);
--bs-btn-active-border-color: var(--theme-#{$color}-less-2);
--bs-btn-active-bg: var(--theme-#{$color}-less-2);
--bs-btn-active-border-color: var(--theme-#{$color});
--bs-btn-active-bg: var(--theme-#{$color}-more);
--bs-btn-focus-shadow-rgb: 130, 138, 145;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
@ -389,6 +386,7 @@ ngx-colors-panel .opened {
.text-muted {
opacity: .5;
color: var(--theme-fg) !important;
}
.form-switch .form-check-input {

8
tabby-settings/src/components/settingsTabBody.component.ts
View File

@ -5,7 +5,13 @@ import { SettingsTabProvider } from '../api'
@Component({
selector: 'settings-tab-body',
template: '<ng-template #placeholder></ng-template>',
styles: [`:host { display: block; padding-bottom: 20px; }`],
styles: [`
:host {
display: block;
padding-bottom: 20px;
max-width: 500px;
}
`],
})
export class SettingsTabBodyComponent {
@Input() provider: SettingsTabProvider

40
tabby-terminal/src/config.ts
View File

@ -32,30 +32,30 @@ export class TerminalConfigProvider extends ConfigProvider {
wordSeparator: ' ()[]{}\'"',
colorScheme: {
__nonStructural: true,
name: 'Material',
foreground: '#eceff1',
background: 'rgba(38, 50, 56, 1)',
selection: null,
cursor: '#FFCC00',
cursorAccent: null,
name: 'Wombat',
foreground: '#cacaca',
background: '#171717',
cursor: '#bbbbbb',
colors: [
'#000000',
'#D62341',
'#9ECE58',
'#FAED70',
'#396FE2',
'#BB80B3',
'#2DDAFD',
'#d0d0d0',
'rgba(255, 255, 255, 0.2)',
'#FF5370',
'#C3E88D',
'#FFCB6B',
'#82AAFF',
'#C792EA',
'#89DDFF',
'#ee2b2a',
'#40a33f',
'#ffea2e',
'#1e80f0',
'#8800a0',
'#16afca',
'#84949c',
'#3d4b4f',
'#dc5c60',
'#70be71',
'#fff163',
'#54a4f3',
'#aa4dbc',
'#42c7da',
'#ffffff',
],
selection: null,
cursorAccent: null,
},
customColorSchemes: [],
warnOnMultilinePaste: true,