GuanM/tabby
1
0
Fork 0
mirror of https://github.com/Eugeny/tabby.git synced 2025-09-08 17:41:50 +00: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
5 changed files with 57 additions and 44 deletions
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 {