Extracting some base CSS to be shared between dash sites. (#8568)

Author: isoos

pkg/web_css/lib/dartdoc.scss

@@ -14,6 +14,9 @@
 
 @use 'src/_staging_ribbon.scss';
 
+// Included after dartdoc/resources in order to make sure we will be able to migrate to it.
+@use 'src/base_dash';
+
 // 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
 // mode, both in dartdoc and on pub.dev pages.

pkg/web_css/lib/src/_base.scss

@@ -8,10 +8,6 @@
 
 @use 'variables';
 
-* {
-  box-sizing: border-box;
-}
-
 body {
   background-color: var(--pub-neutral-bgColor);
   color: var(--pub-neutral-textColor);
@@ -20,11 +16,8 @@ body {
   margin: 0;
   padding: 0;
   overflow-wrap: anywhere;
-}
 
-body, input, button, select {
   font-family: var(--pub-font-family-body);
-  -webkit-font-smoothing: antialiased;
   // we don't use font ligatures, and Google Sans fonts would otherwise change text in surprising ways
   font-variant-ligatures: none;
   font-feature-settings: "liga" 0;
@@ -109,9 +102,7 @@ button {
 }
 
 a {
-  text-decoration: none;
   color: var(--pub-link-text-color);
-  cursor: pointer;
 
   // TODO: fix style to not use bgColor as text and text color as background
   &.link-button {
@@ -121,10 +112,6 @@ a {
     padding: 4px 12px;
   }
 
-  &:hover {
-    text-decoration: underline;
-  }
-
   @include variables.brightness-on-hover;
 }
 

pkg/web_css/lib/src/_base_dash.scss

@@ -0,0 +1,53 @@
+/* Copyright (c) 2025, the Dart project authors.  Please see the AUTHORS file
+   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. */
+
+// NOTE: These styles are to be shared in
+//       https://github.com/dart-lang/site-shared/tree/main/pkgs/dash_design
+
+// *** Layout ****
+
+*, *::before, *::after {
+  // Need to set borders around elements explicitly.
+  border-width: 0;
+
+  // Sets the percived size of the element in the DOM to include its border.
+  box-sizing: border-box;
+}
+
+body {
+  // The body should take up all the vertical space.
+  min-height: 100vh;
+}
+
+// **** Typography ****
+
+// TODO: consider standardizing line-height in body
+
+html {
+  // Prevents the text inflation algorithm used on some smartphones and tablets.
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+// Inherit fonts for inputs and buttons.
+button, input, textarea, select {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+// Links are underlined when hovered.
+a {
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

pkg/web_css/lib/style.scss

@@ -7,6 +7,7 @@
 @use 'src/_third_party';
 
 // Local styles and rules.
+@use 'src/_base_dash';
 @use 'src/_variables';
 @use 'src/_base';
 @use 'src/_alerts';