[plasma/union] src/input/css/styles/breeze: input/css/breeze: Make NavigationTab{Bar,Button} styling look more like upstream

Git commit ec720aa45b617f34391947b89b597d825e4fcb0a by Arjen Hiemstra.
Committed on 04/08/2026 at 07:51.
Pushed by ahiemstra into branch 'master'.

input/css/breeze: Make NavigationTab{Bar,Button} styling look more like upstream

Upstream has some tricky handling between text-below-icon and
text-beside-icon, make sure to replicate that. Also fix paddings and
spacings to reflect upstream values, especially for text-beside-icon.

Fixes #203

M  +25   -11   src/input/css/styles/breeze/kirigami.css

https://invent.kde.org/plasma/union/-/commit/ec720aa45b617f34391947b89b597d825e4fcb0a

diff --git a/src/input/css/styles/breeze/kirigami.css b/src/input/css/styles/breeze/kirigami.css
index 85c55d9c..647dca93 100644
--- a/src/input/css/styles/breeze/kirigami.css
+++ b/src/input/css/styles/breeze/kirigami.css
@@ -193,9 +193,6 @@ inlinemessage
 
 navigationtabbar {
     background-color: var(--window-background-color);
-    padding: var(--small-spacing);
-    spacing: var(--small-spacing);
-    height: 64px;
 
     &.header {
         border-bottom: 1px solid var(--window-border-color);
@@ -207,15 +204,19 @@ navigationtabbar {
 }
 
 navigationtabbutton {
-    border-radius: var(--corner-radius);
-    color: var(--window-text-color);
-    icon-size: var(--icon-size-smallmedium);
-    inset: var(--minimal-spacing);
+    height: 54px; /* grid-unit * 3 */
     padding: var(--small-spacing);
+    inset: var(--small-spacing);
+    spacing: var(--small-spacing);
+
+    icon-size: var(--icon-size-smallmedium);
+    border-radius: var(--corner-radius);
 
     layout-alignment: content fill fill 0;
-    text-alignment-horizontal: center;
-    icon-alignment-horizontal: center;
+    text-alignment-horizontal: start;
+    icon-alignment-horizontal: start;
+
+    color: var(--window-text-color);
 
     &:disabled {
         color: var(--window-disabled-text-color);
@@ -240,9 +241,16 @@ navigationtabbutton {
         border: 1px solid var(--highlight-color);
     }
 
+    &[display="text-beside-icon"] {
+        height: 0px;
+        padding: 12px var(--small-spacing) 12px var(--grid-unit); /* small-spacing + large-spacing */
+        spacing: var(--grid-unit);
+        icon-size: var(--icon-size-small);
+    }
+
     &[display="text-under-icon"] {
-        icon-alignment-vertical: stack-center;
-        text-alignment-vertical: stack-center;
+        icon-alignment: content center stack-center 0;
+        text-alignment: content center stack-center 1;
     }
 }
 
@@ -262,4 +270,10 @@ overlaydrawer
         width: var(--icon-size-medium);
         height: var(--icon-size-medium);
     }
+
+    &[colorset="window"]
+    {
+        background-color: var(--window-background-color);
+        color: var(--window-text-color);
+    }
 }