diff --git a/pkg/web_css/lib/dartdoc.scss b/pkg/web_css/lib/dartdoc.scss index 1d75e1a823..1f9b025d34 100644 --- a/pkg/web_css/lib/dartdoc.scss +++ b/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. diff --git a/pkg/web_css/lib/src/_base.scss b/pkg/web_css/lib/src/_base.scss index 0645c3c972..d4ef37db2f 100644 --- a/pkg/web_css/lib/src/_base.scss +++ b/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; } diff --git a/pkg/web_css/lib/src/_base_dash.scss b/pkg/web_css/lib/src/_base_dash.scss new file mode 100644 index 0000000000..88048f2297 --- /dev/null +++ b/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; + } +} diff --git a/pkg/web_css/lib/style.scss b/pkg/web_css/lib/style.scss index 4eeff363e6..720051949a 100644 --- a/pkg/web_css/lib/style.scss +++ b/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';