Fix staging-ribbon style on dartdoc pages. (#8234)

Author: isoos

app/lib/dartdoc/dartdoc_page.dart

@@ -285,11 +285,11 @@ extension DartDocPageRender on DartDocPage {
     final dataBaseHref = p.relative('', from: p.dirname(options.path));
     return d.element('body', classes: [
       'light-theme',
-      if (activeConfiguration.isStaging) 'staging-banner',
     ], attributes: {
       'data-base-href':
           baseHref ?? (dataBaseHref == '.' ? '' : '$dataBaseHref/'),
       'data-using-base-href': usingBaseHref ?? 'false',
+      if (activeConfiguration.isStaging) 'data-staging': '1',
     }, children: [
       if (activeConfiguration.isStaging)
         d.div(classes: ['staging-ribbon'], text: 'staging'),

app/lib/frontend/templates/views/shared/layout.dart

@@ -166,8 +166,10 @@ d.Node pageLayoutNode({
             requestContext.experimentalFlags.isDarkModeDefault
                 ? 'dark-theme'
                 : 'light-theme',
-            if (activeConfiguration.isStaging) 'staging-banner',
           ],
+          attributes: {
+            if (activeConfiguration.isStaging) 'data-staging': '1',
+          },
           children: [
             // The initialization of dark theme must be in a synchronous, blocking
             // script execution, as otherwise users may see flash of unstyled content

pkg/web_css/lib/dartdoc.scss

@@ -12,7 +12,7 @@
 @use '../../../third_party/dartdoc/resources/github.css';
 @use '../../../third_party/dartdoc/resources/styles.css';
 
-@import 'src/_staging_ribbon.scss';
+@use 'src/_staging_ribbon.scss';
 
 // This is meant for a temporary override for highlight.js. We need to
 // figure out a better way to customize the syntax highlights for dark

pkg/web_css/lib/src/_staging_ribbon.scss

@@ -2,11 +2,10 @@
    for details. All rights reserved. Use of this source code is governed by a
    BSD-style license that can be found in the LICENSE file. */
 
-  body.staging-banner {
-    border: 4px solid red;
-  }
-  
-  body.staging-banner .staging-ribbon {
+body[data-staging] {
+  border: 4px solid red;
+
+  .staging-ribbon {
     position: fixed;
     top: 35px;
     right: -35px;
@@ -23,4 +22,4 @@
     opacity: 0.8;
     pointer-events: none;
   }
-  
+}