From 9c5bad3b070da682786dea663da06fcd6c1a7fc6 Mon Sep 17 00:00:00 2001 From: Istvan Soos Date: Mon, 17 Feb 2025 11:01:32 +0100 Subject: [PATCH 1/3] Extracting some base CSS to be shared between dash sites. --- pkg/web_css/lib/dartdoc.scss | 3 ++ pkg/web_css/lib/src/_base.scss | 13 ------ pkg/web_css/lib/src/_base_dash.scss | 63 +++++++++++++++++++++++++++++ pkg/web_css/lib/style.scss | 1 + 4 files changed, 67 insertions(+), 13 deletions(-) create mode 100644 pkg/web_css/lib/src/_base_dash.scss 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..5778a286b5 --- /dev/null +++ b/pkg/web_css/lib/src/_base_dash.scss @@ -0,0 +1,63 @@ +/* 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; +} + +// Shorter line heights on headings and interactive elements. +h1, h2, h3, h4, h5, h6, button, input, label { + line-height: 1.1; +} + +// Balance text wrapping on headings. +h1, h2, h3, h4, h5, h6 { + text-wrap: balance; +} + +// 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..b02dcac53f 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'; From 5d9fd2978ddec4a60bafd854feeb4aacec3d7da1 Mon Sep 17 00:00:00 2001 From: Istvan Soos Date: Wed, 5 Mar 2025 13:36:07 +0100 Subject: [PATCH 2/3] Remove some styles. --- pkg/web_css/lib/src/_base_dash.scss | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/pkg/web_css/lib/src/_base_dash.scss b/pkg/web_css/lib/src/_base_dash.scss index 5778a286b5..88048f2297 100644 --- a/pkg/web_css/lib/src/_base_dash.scss +++ b/pkg/web_css/lib/src/_base_dash.scss @@ -42,16 +42,6 @@ button, input, textarea, select { font-size: inherit; } -// Shorter line heights on headings and interactive elements. -h1, h2, h3, h4, h5, h6, button, input, label { - line-height: 1.1; -} - -// Balance text wrapping on headings. -h1, h2, h3, h4, h5, h6 { - text-wrap: balance; -} - // Links are underlined when hovered. a { cursor: pointer; From 866292051041aea3f9d0af1405de1fa648a759fb Mon Sep 17 00:00:00 2001 From: Istvan Soos Date: Wed, 5 Mar 2025 13:51:53 +0100 Subject: [PATCH 3/3] Fix reference for test. --- pkg/web_css/lib/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/web_css/lib/style.scss b/pkg/web_css/lib/style.scss index b02dcac53f..720051949a 100644 --- a/pkg/web_css/lib/style.scss +++ b/pkg/web_css/lib/style.scss @@ -7,7 +7,7 @@ @use 'src/_third_party'; // Local styles and rules. -@use 'src/base_dash'; +@use 'src/_base_dash'; @use 'src/_variables'; @use 'src/_base'; @use 'src/_alerts';