variable theme spaciness

app/src/global.scss

@@ -1,3 +1,7 @@
+html {
+    --spaciness: 1;
+}
+
 body {
     min-height: 100vh;
     overflow: hidden;
@@ -21,8 +25,8 @@ a, button {
 
         & > svg {
             pointer-events: none;
-            width: 16px;
-            height: 16px;
+            // width: 16px;
+            // height: 16px;
         }
     }
 }

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

@@ -10,11 +10,12 @@
     cursor: default;
     animation: 0.5s ease-out fadeIn;
     transition: 0.25s background;
+
+    --tabs-height: calc(38px * var(--spaciness));
+    --side-tab-width: calc(200px * var(--spaciness));
 }
 
-$tabs-height: 38px;
 $tab-border-radius: 4px;
-$side-tab-width: 200px;
 
 .wrap {
   display: flex;
@@ -46,19 +47,19 @@ $side-tab-width: 200px;
 
 .content.tabs-on-side > .tab-bar {
     height: 100%;
-    width: $side-tab-width;
+    width: var(--side-tab-width);
     overflow-y: auto;
     overflow-x: hidden;
     flex-direction: column;
     background: rgba(0, 0, 0, 0.25);
 
     .tabs {
-        width: $side-tab-width;
+        width: var(--side-tab-width);
         flex: none;
         flex-direction: column;
 
         tab-header {
-            flex: 0 0 $tabs-height;
+            flex: 0 0 var(--tabs-height);
         }
     }
 
@@ -69,18 +70,22 @@ $side-tab-width: 200px;
     &>.inset {
         opacity: 0;
     }
+
+    ::ng-deep tab-header {
+        width: 100% !important;
+    }
 }
 
 
 .tab-bar {
     flex: none;
-    height: $tabs-height;
+    height: var(--tabs-height);
     display: flex;
     width: 100%;
 
     .btn-tab-bar {
-        line-height: $tabs-height + 2px;
-        height: $tabs-height;
+        line-height: calc(var(--tabs-height) + 2px);
+        height: var(--tabs-height);
         cursor: pointer;
 
         display: flex;
@@ -122,8 +127,8 @@ $side-tab-width: 200px;
     }
 
     & > .inset {
-        width: 85px;
-        height: $tabs-height;
+        width: calc(70px + 15px * var(--spaciness));
+        height: var(--tabs-height);
         flex: none;
         -webkit-app-region: drag;
     }
@@ -170,18 +175,12 @@ hotkey-hint {
 
 ::ng-deep .btn-tab-bar svg,
 ::ng-deep .btn-tab-bar + .dropdown-menu svg {
-    width: 22px;
-    height: 16px;
+    width: calc(22px * var(--spaciness));
+    height: calc(16px * var(--spaciness));
     fill: white;
     fill-opacity: 0.75;
 }
 
-.icon-wrapper {
-    display: flex;
-    width: 16px;
-    height: 17px;
-}
-
 ::ng-deep .btn-update svg {
     fill: cyan;
 }

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

@@ -35,7 +35,7 @@ $tabs-height: 38px;
         -webkit-app-region: no-drag;
         cursor: -webkit-grab;
 
-        width: 22px;
+        width: calc(22px * var(--spaciness));
         border-radius: 10px;
         text-align: center;
         transition: 0.25s all;

tabby-core/src/configDefaults.yaml

@@ -18,6 +18,7 @@ appearance:
   vibrancy: false
   vibrancyType: 'blur'
   lastTabClosesWindow: false
+  spaciness: 1
 terminal:
   showBuiltinProfiles: true
   showRecentProfiles: 3

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

@@ -34,7 +34,6 @@ export class ThemesService {
     private applyThemeVariables () {
         if (!this.findCurrentTheme().followsColorScheme) {
             document.documentElement.style.cssText = this.rootElementStyleBackup
-            return
         }
 
         const theme = this.config.store.terminal.colorScheme
@@ -64,6 +63,7 @@ export class ThemesService {
         const accentIndex = 4
         const vars: Record<string, string> = {}
 
+        if (this.findCurrentTheme().followsColorScheme) {
             vars['--bs-body-bg'] = background.string()
             vars['--bs-body-color'] = theme.foreground
             vars['--bs-black'] = theme.colors[0]
@@ -121,6 +121,9 @@ export class ThemesService {
 
             const switchBackground = less(theme.colors[accentIndex], 0.25).string()
             vars['--bs-form-switch-bg'] = `url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27${switchBackground}%27/%3e%3c/svg%3e")`
+        }
+
+        vars['--spaciness'] = this.config.store.appearance.spaciness
 
         for (const [key, value] of Object.entries(vars)) {
             document.documentElement.style.setProperty(key, value)

tabby-core/src/theme.new.scss

@@ -556,7 +556,7 @@ ngx-colors-panel .opened {
 }
 
 start-page {
-    background: var(--theme-bg);
+    background: var(--theme-bg-more-2);
 }
 
 split-tab-spanner {

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

@@ -9,6 +9,18 @@ h3.mb-3(translate) Window
     )
         option(*ngFor='let theme of themes', [ngValue]='theme.name') {{theme.name}}
 
+.form-line
+    .header
+        .title(translate) Spaciness
+        .description(translate) Controls the amount of space between elements
+    input(
+        type='range',
+        [(ngModel)]='config.store.appearance.spaciness',
+        (mouseup)='saveConfiguration()',
+        min='0.6',
+        max='1.4',
+        step='0.1'
+    )
 
 .form-line(*ngIf='hostApp.platform === Platform.Web')
     .header

tabby-terminal/src/components/baseTerminalTab.component.scss

@@ -10,7 +10,7 @@
         position: relative;
         display: block;
         overflow: hidden;
-        margin: 15px;
+        margin: calc(max(0px, 30px * var(--spaciness) - 15px));
         transition: opacity ease-out 0.25s;
         opacity: 0;