ui: new theme contrast fixes - fixed #8128

tabby-core/src/components/selectorModal.component.pug

@@ -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()')
+                .no-wrap.badge.text-bg-secondary.ms-2(*ngIf='selectedIndex == i && canEditSelected()')
-                    span Backspace
+                    span BACKSPACE
                     i.fas.fa-pencil.ms-1
-                .no-wrap.badge.text-bg-secondary.text-muted.ms-2(*ngIf='selectedIndex == i')
+                .no-wrap.badge.text-bg-secondary.ms-2(*ngIf='selectedIndex == i')
-                    span Enter
+                    span ENTER
                     i.fas.fa-arrow-right.ms-1

tabby-core/src/services/themes.service.ts

@@ -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
+                vars[fg] = this.ensureContrast(colorFg, colorBg).string()
-                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
             }
         }
 
@@ -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
     }

tabby-core/src/theme.new.scss

@@ -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-color: var(--theme-primary-fg);
-    --bs-nav-pills-link-active-bg: var(--bs-primary);
+    --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-border-color: var(--theme-#{$color});
-        --bs-btn-active-bg: var(--theme-#{$color}-less-2);
+        --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 {

tabby-settings/src/components/settingsTabBody.component.ts

@@ -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

tabby-terminal/src/config.ts

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