fixed #8124 - animation toggle didn't affect pane maximizing

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

@@ -37,14 +37,12 @@ title-bar(
 
         .btn-group.background
             .d-flex(
-                *ngFor='let button of leftToolbarButtons',
+                *ngFor='let button of leftToolbarButtons'
-                ngbDropdown
             )
                 button.btn.btn-secondary.btn-tab-bar(
                     [title]='button.label',
                     (click)='button.run && button.run()',
-                    [fastHtmlBind]='button.icon',
+                    [fastHtmlBind]='button.icon'
-                    ngbDropdownToggle,
                 )
 
             .d-flex(
@@ -67,14 +65,12 @@ title-bar(
 
         .btn-group.background
             .d-flex(
-                *ngFor='let button of rightToolbarButtons',
+                *ngFor='let button of rightToolbarButtons'
-                ngbDropdown
             )
                 button.btn.btn-secondary.btn-tab-bar(
                     [title]='button.label',
                     (click)='button.run && button.run()',
-                    [fastHtmlBind]='button.icon',
+                    [fastHtmlBind]='button.icon'
-                    ngbDropdownToggle,
                 )
 
             button.btn.btn-secondary.btn-tab-bar.btn-update(

tabby-core/src/components/splitTab.component.scss

@@ -24,3 +24,7 @@
         border-radius: 10px;
     }
 }
+
+::ng-deep .no-animations split-tab > .child {
+    transition: none;
+}

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

@@ -26,9 +26,9 @@ export class ThemesService {
             this.applyThemeVariables()
             config.changed$.subscribe(() => {
                 this.applyCurrentTheme()
+                this.applyThemeVariables()
             })
         })
-        config.changed$.subscribe(() => this.applyThemeVariables())
     }
 
     private applyThemeVariables () {
@@ -62,6 +62,7 @@ export class ThemesService {
         // const backgroundMore =more(theme.background, 0.25).string()
         const accentIndex = 4
         const vars: Record<string, string> = {}
+        const contrastPairs: string[][] = []
 
         if (this.findCurrentTheme().followsColorScheme) {
             vars['--bs-body-bg'] = background.string()
@@ -82,6 +83,8 @@ export class ThemesService {
             // vars['--bs-purple'] = theme.colors[13]
             // vars['--bs-cyan'] = theme.colors[14]
 
+            contrastPairs.push(['--bs-body-bg', '--bs-body-color'])
+
             vars['--theme-fg-more-2'] = more(theme.foreground, 0.5).string()
             vars['--theme-fg-more'] = more(theme.foreground, 0.25).string()
             vars['--theme-fg'] = theme.foreground
@@ -94,6 +97,12 @@ export class ThemesService {
             vars['--theme-bg-more'] = backgroundMore
             vars['--theme-bg-more-2'] = more(backgroundMore, 0.25).string()
 
+            contrastPairs.push(['--theme-bg', '--theme-fg'])
+            contrastPairs.push(['--theme-bg-less', '--theme-fg-less'])
+            contrastPairs.push(['--theme-bg-less-2', '--theme-fg-less-2'])
+            contrastPairs.push(['--theme-bg-more', '--theme-fg-more'])
+            contrastPairs.push(['--theme-bg-more-2', '--theme-fg-more-2'])
+
             const themeColors = {
                 primary: theme.colors[accentIndex],
                 secondary: theme.colors[8],
@@ -117,6 +126,9 @@ 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()
+
+                contrastPairs.push([`--theme-${key}`, `--theme-${key}-fg`])
             }
 
             const switchBackground = less(theme.colors[accentIndex], 0.25).string()
@@ -125,9 +137,29 @@ export class ThemesService {
 
         vars['--spaciness'] = this.config.store.appearance.spaciness
 
+        for (const [bg, fg] of contrastPairs) {
+            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
+            }
+        }
+
         for (const [key, value] of Object.entries(vars)) {
             document.documentElement.style.setProperty(key, value)
         }
+
+        document.body.classList.toggle('no-animations', !this.config.store.accessibility.animations)
     }
 
     findTheme (name: string): Theme|null {

tabby-core/src/theme.new.scss

@@ -195,14 +195,14 @@ tab-body {
         --bs-btn-focus-shadow-rgb: 130, 138, 145;
         --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 
-        --bs-btn-color: var(--theme-#{$color}-more-2);
+        --bs-btn-color: var(--theme-#{$color}-fg);
-        --bs-btn-hover-color: var(--theme-#{$color}-more-2);
+        --bs-btn-hover-color: var(--theme-#{$color}-fg);
-        --bs-btn-active-color: var(--theme-#{$color}-more-2);
+        --bs-btn-active-color: var(--theme-#{$color}-fg);
-        --bs-btn-disabled-color: var(--theme-#{$color}-more-2);
+        --bs-btn-disabled-color: var(--theme-#{$color}-fg);
     }
 
     .alert-#{$color} {
-        --bs-alert-bg: var(--theme-#{$color}-more-2);
+        --bs-alert-bg: var(--theme-#{$color}-fg);
         --bs-alert-border-color: var(--theme-#{$color}-more);
         --bs-alert-color: var(--theme-#{$color});
     }

tabby-electron/package.json

@@ -24,7 +24,7 @@
     "electron-promise-ipc": "^2.2.4",
     "ps-node": "^0.1.6",
     "tmp-promise": "^3.0.2",
-    "hasbin": "^1.2.3",
+    "which": "^3.0.0",
     "winston": "^3.3.3"
   }
 }

tabby-electron/src/shells/windowsStock.ts

@@ -1,6 +1,6 @@
 import * as path from 'path'
 import * as fs from 'fs/promises'
-import hasbin from 'hasbin'
+import * as which from 'which'
 import { Injectable } from '@angular/core'
 import { HostAppService, Platform, ConfigService } from 'tabby-core'
 import { ElectronService } from '../services/electron.service'
@@ -73,7 +73,7 @@ export class WindowsStockShellsProvider extends WindowsBaseShellProvider {
 
     private async getPowerShellPath () {
         for (const name of ['pwsh.exe', 'powershell.exe']) {
-            if (await new Promise(resolve => hasbin(name, resolve))) {
+            if (await which(name, { nothrow: true })) {
                 return name
             }
         }

tabby-electron/yarn.lock

@@ -21,11 +21,6 @@ async@^3.2.3:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.3.tgz#ac53dafd3f4720ee9e8a160628f18ea91df196c9"
   integrity sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==
 
-async@~1.5:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
-  integrity sha512-nSVgobk4rv61R9PUSDtYt7mPVB2olxNR5RWJcAsH676/ef11bUZwvu7+RGYrYauVdDPcO519v68wRhXQtxsV9w==
-
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -209,13 +204,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hasbin@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/hasbin/-/hasbin-1.2.3.tgz#78c5926893c80215c2b568ae1fd3fcab7a2696b0"
-  integrity sha512-CCd8e/w2w28G8DyZvKgiHnQJ/5XXDz6qiUHnthvtag/6T5acUeN5lqq+HMoBqcmgWueWDhiCplrw0Kb1zDACRg==
-  dependencies:
-    async "~1.5"
-
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -296,6 +284,11 @@ is-symbol@^1.0.2, is-symbol@^1.0.3:
   dependencies:
     has-symbols "^1.0.2"
 
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
 kuler@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/kuler/-/kuler-2.0.0.tgz#e2c570a3800388fb44407e851531c1d670b061b3"
@@ -515,6 +508,13 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
+which@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/which/-/which-3.0.0.tgz#a9efd016db59728758a390d23f1687b6e8f59f8e"
+  integrity sha512-nla//68K9NU6yRiwDY/Q8aU6siKlSs64aEC7+IV56QoAuyQT2ovsJcgGYGyqMOmI/CGN1BOR6mM5EN0FBO+zyQ==
+  dependencies:
+    isexe "^2.0.0"
+
 winston-transport@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/winston-transport/-/winston-transport-4.5.0.tgz#6e7b0dd04d393171ed5e4e4905db265f7ab384fa"

tabby-settings/src/components/settingsTab.component.pug

@@ -114,6 +114,18 @@
                             .title(translate) Enable animations
                         toggle([(ngModel)]='config.store.accessibility.animations', (ngModelChange)='saveConfiguration()')
 
+                    .form-line
+                        .header
+                            .title(translate) Minimum contrast ratio
+                        input.form-control(
+                            type='number',
+                            min='1',
+                            max='21',
+                            step='0.5',
+                            [(ngModel)]='config.store.terminal.minimumContrastRatio',
+                            (ngModelChange)='config.save()'
+                        )
+
         ng-container(*ngFor='let provider of settingsProviders')
             li(*ngIf='provider.prioritized', [ngbNavItem]='provider.id')
                 a.d-flex.align-items-center(ngbNavLink)