Repository: dart-lang/pub-dev (dart)

Issue:
site-header-nav backround color not displaying in mobile size
<!-- File issues with the `pub` client at https://github.com/dart-lang/pub/issues/new -->

### Issue Description

There is a problem with the background color in the `site-header-nav` for mobile size. The background color is not being applied correctly due to a missing `--` in the CSS variable.

#### Steps to Reproduce
- Open the website on a mobile device or resize the browser window to mobile size.
- Observe the background color of the `site-header-nav`.

#### Expected Behavior
- The background color should be applied correctly using the CSS variable `--pub-site_header_popup-background-color`.

#### Actual Behavior
- The background color is not applied correctly due to the missing `--` in the CSS variable.

#### Fix
- Add the missing `--` to the CSS variable in the `background` property.

#### Screenshot
![image](https://github.com/user-attachments/assets/51391889-aad9-4096-800b-5403c966101e)


#### Example Code
```scss
.site-header-nav {
  @media (max-width: $device-mobile-max-width) {
    background: var(--pub-site_header_popup-background-color);
  }
}

Pull request description:
Fixes #8106

Patch:
diff --git a/pkg/web_css/lib/src/_site_header.scss b/pkg/web_css/lib/src/_site_header.scss
index 245066b409..4b885dfc9b 100644
--- a/pkg/web_css/lib/src/_site_header.scss
+++ b/pkg/web_css/lib/src/_site_header.scss
@@ -233,7 +233,7 @@
       bottom: 0;
       left: 0;
       width: 80%;
-      background: var(pub-site_header_popup-background-color);
+      background: var(--pub-site_header_popup-background-color);
       transform: translateX(-100%);
       transition: transform 0.3s ease;
       z-index: $z-index-nav-mask + 1;


Test patch:
diff --git a/pkg/web_css/test/variables_test.dart b/pkg/web_css/test/variables_test.dart
index a688d3ec2d..1b5100621a 100644
--- a/pkg/web_css/test/variables_test.dart
+++ b/pkg/web_css/test/variables_test.dart
@@ -75,5 +75,28 @@ void main() {
 
       expect(unused, isEmpty);
     });
+
+    test('all variables used have definition', () async {
+      final files = await Directory('lib')
+          .list(recursive: true)
+          .where((f) => f is File && f.path.endsWith('.scss'))
+          .cast<File>()
+          .toList();
+      final varRegExp = RegExp(r'var\((.*?)\)');
+      for (final file in files) {
+        final content = await file.readAsString();
+        for (final m in varRegExp.allMatches(content)) {
+          final name = m.group(1)!.trim();
+          if (!variables.contains(name)) {
+            // exempt Material Design variables
+            if (name.startsWith('--mdc-')) {
+              continue;
+            }
+
+            fail('${file.path} references `$name` without definition.');
+          }
+        }
+      }
+    });
   });
 }