YaruTitleBar: small styling changes (#478)

* YaruTitleBar: small styling changes

- default size is now 47px (border adds on top, which ends up with 48 which is the height of gtk headerbars)
-  default light bg to #ebebeb, which is the gtk4 dark headerbar bg and dark bg to #303030

* add goldens

* Update goldens

Co-authored-by: J-P Nurmi <jp.nurmi@canonical.com>

lib/src/constants.dart

@@ -4,7 +4,13 @@ import 'package:flutter/material.dart';
 const kYaruPagePadding = 20.0;
 
 /// The default height of [YaruTitleBar].
-const kYaruTitleBarHeight = 50.0;
+const kYaruTitleBarHeight = 47.0;
+
+/// The default background color of [YaruTitleBar] in the light theme.
+const kYaruTitleBarBgLight = Color(0xFFebebeb);
+
+/// The default background color of [YaruTitleBar] in the dark theme.
+const kYaruTitleBarBgDark = Color(0xFF303030);
 
 /// The default border radius for Yaru-style containers.
 const kYaruContainerRadius = 8.0;

lib/src/controls/yaru_title_bar.dart

@@ -112,7 +112,7 @@ class YaruTitleBar extends StatelessWidget implements PreferredSizeWidget {
       if (!states.contains(MaterialState.focused)) {
         return Colors.transparent;
       }
-      return Colors.black.withOpacity(light ? 0.075 : 0.2);
+      return light ? kYaruTitleBarBgLight : kYaruTitleBarBgDark;
     });
     final backgroundColor =
         MaterialStateProperty.resolveAs(this.backgroundColor, states) ??
@@ -135,7 +135,9 @@ class YaruTitleBar extends StatelessWidget implements PreferredSizeWidget {
     final shape = theme.shape ??
         Border(
           bottom: BorderSide(
-            color: Colors.black.withOpacity(light ? 0.1 : 0.2),
+            color: light
+                ? Colors.black.withOpacity(0.1)
+                : Colors.white.withOpacity(0.06),
           ),
         );