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;
+            // width: 16px;
-            height: 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;
+        line-height: calc(var(--tabs-height) + 2px);
-        height: $tabs-height;
+        height: var(--tabs-height);
         cursor: pointer;
 
         display: flex;
@@ -122,8 +127,8 @@ $side-tab-width: 200px;
     }
 
     & > .inset {
-        width: 85px;
+        width: calc(70px + 15px * var(--spaciness));
-        height: $tabs-height;
+        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;
+    width: calc(22px * var(--spaciness));
-    height: 16px;
+    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,63 +63,67 @@ export class ThemesService {
         const accentIndex = 4
         const vars: Record<string, string> = {}
 
-        vars['--bs-body-bg'] = background.string()
+        if (this.findCurrentTheme().followsColorScheme) {
-        vars['--bs-body-color'] = theme.foreground
+            vars['--bs-body-bg'] = background.string()
-        vars['--bs-black'] = theme.colors[0]
+            vars['--bs-body-color'] = theme.foreground
-        vars['--bs-red'] = theme.colors[1]
+            vars['--bs-black'] = theme.colors[0]
-        vars['--bs-green'] = theme.colors[2]
+            vars['--bs-red'] = theme.colors[1]
-        vars['--bs-yellow'] = theme.colors[3]
+            vars['--bs-green'] = theme.colors[2]
-        vars['--bs-blue'] = theme.colors[4]
+            vars['--bs-yellow'] = theme.colors[3]
-        vars['--bs-purple'] = theme.colors[5]
+            vars['--bs-blue'] = theme.colors[4]
-        vars['--bs-cyan'] = theme.colors[6]
+            vars['--bs-purple'] = theme.colors[5]
-        vars['--bs-gray'] = theme.colors[7]
+            vars['--bs-cyan'] = theme.colors[6]
-        vars['--bs-gray-dark'] = theme.colors[8]
+            vars['--bs-gray'] = theme.colors[7]
-        // vars['--bs-red'] = theme.colors[9]
+            vars['--bs-gray-dark'] = theme.colors[8]
-        // vars['--bs-green'] = theme.colors[10]
+            // vars['--bs-red'] = theme.colors[9]
-        // vars['--bs-yellow'] = theme.colors[11]
+            // vars['--bs-green'] = theme.colors[10]
-        // vars['--bs-blue'] = theme.colors[12]
+            // vars['--bs-yellow'] = theme.colors[11]
-        // vars['--bs-purple'] = theme.colors[13]
+            // vars['--bs-blue'] = theme.colors[12]
-        // vars['--bs-cyan'] = theme.colors[14]
+            // vars['--bs-purple'] = theme.colors[13]
+            // vars['--bs-cyan'] = theme.colors[14]
 
-        vars['--theme-fg-more-2'] = more(theme.foreground, 0.5).string()
+            vars['--theme-fg-more-2'] = more(theme.foreground, 0.5).string()
-        vars['--theme-fg-more'] = more(theme.foreground, 0.25).string()
+            vars['--theme-fg-more'] = more(theme.foreground, 0.25).string()
-        vars['--theme-fg'] = theme.foreground
+            vars['--theme-fg'] = theme.foreground
-        vars['--theme-fg-less'] = less(theme.foreground, 0.25).string()
+            vars['--theme-fg-less'] = less(theme.foreground, 0.25).string()
-        vars['--theme-fg-less-2'] = less(theme.foreground, 0.5).string()
+            vars['--theme-fg-less-2'] = less(theme.foreground, 0.5).string()
 
-        vars['--theme-bg-less-2'] = less(theme.background, 0.5).string()
+            vars['--theme-bg-less-2'] = less(theme.background, 0.5).string()
-        vars['--theme-bg-less'] = less(theme.background, 0.25).string()
+            vars['--theme-bg-less'] = less(theme.background, 0.25).string()
-        vars['--theme-bg'] = theme.background
+            vars['--theme-bg'] = theme.background
-        vars['--theme-bg-more'] = backgroundMore
+            vars['--theme-bg-more'] = backgroundMore
-        vars['--theme-bg-more-2'] = more(backgroundMore, 0.25).string()
+            vars['--theme-bg-more-2'] = more(backgroundMore, 0.25).string()
 
-        const themeColors = {
+            const themeColors = {
-            primary: theme.colors[accentIndex],
+                primary: theme.colors[accentIndex],
-            secondary: theme.colors[8],
+                secondary: theme.colors[8],
-            tertiary: theme.colors[8],
+                tertiary: theme.colors[8],
-            warning: theme.colors[3],
+                warning: theme.colors[3],
-            danger: theme.colors[1],
+                danger: theme.colors[1],
-            success: theme.colors[2],
+                success: theme.colors[2],
-            info: theme.colors[4],
+                info: theme.colors[4],
-            dark: more(theme.background, 0.5).string(),
+                dark: more(theme.background, 0.5).string(),
-            light: more(theme.foreground, 0.5).string(),
+                light: more(theme.foreground, 0.5).string(),
-            link: theme.colors[8], // for .btn-link
+                link: theme.colors[8], // for .btn-link
+            }
+
+            for (const [key, color] of Object.entries(themeColors)) {
+                vars[`--bs-${key}-bg`] = more(color, 0.5).string()
+                vars[`--bs-${key}-color`] = less(color, 0.5).string()
+                vars[`--bs-${key}`] = color
+                vars[`--bs-${key}-rgb`] = Color(color).rgb().array().join(', ')
+                vars[`--theme-${key}-more-2`] = more(color, 1).string()
+                vars[`--theme-${key}-more`] = more(color, 0.5).string()
+                vars[`--theme-${key}`] = color
+                vars[`--theme-${key}-less`] = less(color, 0.25).string()
+                vars[`--theme-${key}-less-2`] = less(color, 0.75).string()
+            }
+
+            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")`
         }
 
-        for (const [key, color] of Object.entries(themeColors)) {
+        vars['--spaciness'] = this.config.store.appearance.spaciness
-            vars[`--bs-${key}-bg`] = more(color, 0.5).string()
-            vars[`--bs-${key}-color`] = less(color, 0.5).string()
-            vars[`--bs-${key}`] = color
-            vars[`--bs-${key}-rgb`] = Color(color).rgb().array().join(', ')
-            vars[`--theme-${key}-more-2`] = more(color, 1).string()
-            vars[`--theme-${key}-more`] = more(color, 0.5).string()
-            vars[`--theme-${key}`] = color
-            vars[`--theme-${key}-less`] = less(color, 0.25).string()
-            vars[`--theme-${key}-less-2`] = less(color, 0.75).string()
-        }
-
-        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")`
 
         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;