From 4c4c2d9f89eb21a81ae202fc236f3f8dba93db53 Mon Sep 17 00:00:00 2001 From: Istvan Soos Date: Fri, 27 Sep 2024 11:48:45 +0200 Subject: [PATCH] Migrate inset colors (code and tab background) --- pkg/web_css/lib/src/_base.scss | 4 ++-- pkg/web_css/lib/src/_detail_page.scss | 4 ++-- pkg/web_css/lib/src/_form.scss | 4 ++-- pkg/web_css/lib/src/_home.scss | 2 +- pkg/web_css/lib/src/_list.scss | 8 ++++---- pkg/web_css/lib/src/_tags.scss | 2 +- pkg/web_css/lib/src/_variables.scss | 18 +++++++----------- 7 files changed, 19 insertions(+), 23 deletions(-) diff --git a/pkg/web_css/lib/src/_base.scss b/pkg/web_css/lib/src/_base.scss index b73418e8bf..93a541f686 100644 --- a/pkg/web_css/lib/src/_base.scss +++ b/pkg/web_css/lib/src/_base.scss @@ -148,7 +148,7 @@ strong { .markdown-body code, code { - background: var(--pub-code-background-color); + background: var(--pub-inset-bgColor); border: none; border-radius: 4px; font-family: var(--pub-code-text-font_family); @@ -159,7 +159,7 @@ code { .dark-theme .hljs, .markdown-body pre, pre { - background: var(--pub-code-background-color); + background: var(--pub-inset-bgColor); color: var(--pub-code-text-color); } diff --git a/pkg/web_css/lib/src/_detail_page.scss b/pkg/web_css/lib/src/_detail_page.scss index 2fcf97831d..7e193b80ff 100644 --- a/pkg/web_css/lib/src/_detail_page.scss +++ b/pkg/web_css/lib/src/_detail_page.scss @@ -13,7 +13,7 @@ $detail-tabs-tablet-width: calc(100% - 240px); .-wide-header-detail-page { .detail-header, .detail-tabs-wide-header { - background: var(--pub-code-background-color); + background: var(--pub-inset-bgColor); color: var(--pub-default-text-color); } @@ -300,7 +300,7 @@ $detail-tabs-tablet-width: calc(100% - 240px); margin: 0 0 24px -12px; padding: 0; - background: var(--pub-detail_tab-background-color); + background: var(--pub-inset-bgColor); display: flex; align-items: center; flex-wrap: wrap; diff --git a/pkg/web_css/lib/src/_form.scss b/pkg/web_css/lib/src/_form.scss index 0a3d339514..48c0090c8b 100644 --- a/pkg/web_css/lib/src/_form.scss +++ b/pkg/web_css/lib/src/_form.scss @@ -61,14 +61,14 @@ border-width: 0px; .mdc-data-table__row { - border-top-color: var(--pub-code-background-color); + border-top-color: var(--pub-inset-bgColor); &:hover { background: inherit; } &:nth-child(even) { - background: var(--pub-code-background-color); + background: var(--pub-inset-bgColor); } } diff --git a/pkg/web_css/lib/src/_home.scss b/pkg/web_css/lib/src/_home.scss index 08cc325426..e9e396eb67 100644 --- a/pkg/web_css/lib/src/_home.scss +++ b/pkg/web_css/lib/src/_home.scss @@ -80,7 +80,7 @@ &.home-block-ff, &.home-block-pow { - background: var(--pub-code-background-color); + background: var(--pub-inset-bgColor); } .home-block-image { diff --git a/pkg/web_css/lib/src/_list.scss b/pkg/web_css/lib/src/_list.scss index 3c668e1b8b..baf4f53288 100644 --- a/pkg/web_css/lib/src/_list.scss +++ b/pkg/web_css/lib/src/_list.scss @@ -36,7 +36,7 @@ } .count { - background: var(--pub-code-background-color); + background: var(--pub-inset-bgColor); display: inline-block; font-size: 12px; font-family: monospace; @@ -334,7 +334,7 @@ display: inline-block; text-transform: uppercase; color: var(--pub-pagination-active-color); - background: var(--pub-pagination-background-color); + background: var(--pub-inset-bgColor); font-size: 14px; border-radius: 3px; margin-top: 40px; @@ -346,7 +346,7 @@ &.-active { pointer-events: none; - color: var(--pub-pagination-background-color); + color: var(--pub-inset-bgColor); background: var(--pub-pagination-active-color); } @@ -427,7 +427,7 @@ cursor: pointer; &:hover { - background-color: var(--pub-code-background-color); + background-color: var(--pub-inset-bgColor); } a { diff --git a/pkg/web_css/lib/src/_tags.scss b/pkg/web_css/lib/src/_tags.scss index 8f5a1cf1cc..bac1776df5 100644 --- a/pkg/web_css/lib/src/_tags.scss +++ b/pkg/web_css/lib/src/_tags.scss @@ -12,7 +12,7 @@ /* Tags that are simple labels. */ .package-tag { - background: var(--pub-tag_simplebadge-background-color); + background: var(--pub-inset-bgColor); text-transform: uppercase; color: var(--pub-tag_simplebadge-text-color); padding: 4px 8px; diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss index db6940573f..184d77b147 100644 --- a/pkg/web_css/lib/src/_variables.scss +++ b/pkg/web_css/lib/src/_variables.scss @@ -16,16 +16,17 @@ // - `[property]` may be `color`, `opacity` for specific values, or a `value` for multi-part properties. :root { - --pub-color-white: #ffffff; + --pub-color-white: #ffffff; + --pub-color-smokeWhite: #f5f5f7; // slight deviation from official white-smoke (f5f5f5) --pub-color-dangerRed: #ff4242; --pub-neutral-bgColor: var(--pub-color-white); + --pub-inset-bgColor: var(--pub-color-smokeWhite); --pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif; --pub-default-text-color: hsl(0, 0%, 29%); --pub-default-text-font_family: "Google Sans Text", "Google Sans", "Roboto", sans-serif; - --pub-code-background-color: #f5f5f7; --pub-code-text-color: var(--pub-default-text-color); --pub-link-text-color: #0175c2; --pub-code-text-font_family: "Google Sans Mono", "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace; @@ -39,7 +40,6 @@ --pub-collections_icon-background-color: #aeaeae; --pub-thumbnail_container-background-color: var(--pub-color-white); // same in dark mode --pub-copy_feedback-background-color: #fafaff; - --pub-detail_tab-background-color: var(--pub-code-background-color); --pub-detail_tab-text-color: var(--pub-default-text-color); --pub-detail_tab-underline-color: #dddddd; --pub-detail_tab-active-color: #1967d2; @@ -56,7 +56,6 @@ --pub-home_card_hover-background-color: #fafafa; --pub-home_card_hover-box_shadow-color: rgba(0, 0, 0, 0.4); --pub-home_card_hover_fadeout-background-value: linear-gradient(transparent 90%, var(--pub-home_card_hover-background-color)); - --pub-pagination-background-color: var(--pub-code-background-color); --pub-pagination-active-color: var(--pub-link-text-color); --pub-pagination-inactive-color: #aaaaaa; --pub-input-placeholder-color: #888; @@ -88,7 +87,6 @@ --pub-sort_control_selected-text-color: var(--pub-default-text-color); --pub-spinner_frame-background-color: rgba(0, 0, 0, 0.2); --pub-summary_hover-background-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-neutral-bgColor) 80%); - --pub-tag_simplebadge-background-color: #f0f0f0; --pub-tag_simplebadge-text-color: #444444; --pub_tag_simplebadge_warning-background-color: #c0392b; --pub_tag_simplebadge_warning-text-color: #f8f8f8; @@ -111,20 +109,20 @@ .dark-theme { --pub-color-darkGunmetal: #1f262a; // close to #1d2026 + --pub-color-anchorBlack: #41424c; --pub-neutral-bgColor: var(--pub-color-darkGunmetal); + --pub-inset-bgColor: var(--pub-color-anchorBlack); --pub-default-text-color: #e0e0e0; - --pub-code-background-color: #474747; --pub-code-text-color: var(--pub-default-text-color); --pub-link-text-color: #40c4ff; --pub-badge-default-color: var(--pub-link-text-color); --pub-badge-red-color: var(--pub-color-dangerRed); --pub-copy_feedback-background-color: #404040; - --pub-detail_tab-background-color: var(--pub-code-background-color); --pub-detail_tab-text-color: var(--pub-default-text-color); --pub-detail_tab-underline-color: #888888; - --pub-detail_tab-active-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-detail_tab-background-color) 20%); + --pub-detail_tab-active-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-inset-bgColor) 20%); --pub-detail_tab-admin-color: #e03030; --pub-home_title-text-color: #31b0fc; --pub-home_card-box_shadow-color: rgba(255, 255, 255, 0.2); @@ -132,7 +130,6 @@ --pub-home_card_hover-background-color: #383838; --pub-home_card_hover-box_shadow-color: rgba(255, 255, 255, 0.3); --pub-home_card_hover_fadeout-background-value: linear-gradient(transparent 90%, var(--pub-home_card_hover-background-color)); - --pub-pagination-background-color: var(--pub-code-background-color); --pub-pagination-active-color: var(--pub-link-text-color); --pub-pagination-inactive-color: #aaaaaa; --pub-pkg_list_item_hover-background-color: #333333; @@ -140,12 +137,11 @@ --pub-score_label-text-color: #a0b0b8; --pub-score_value-text-color: var(--pub-link-text-color); --pub-sort_control-text-color: var(--pub-default-text-color); - --pub-sort_control_hover-background-color: var(--pub-code-background-color); + --pub-sort_control_hover-background-color: #333333; --pub-sort_control_hover-text-color: var(--pub-default-text-color); --pub-sort_control_selected-background-color: #206080; --pub-sort_control_selected-text-color: var(--pub-default-text-color); --pub-summary_hover-background-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-neutral-bgColor) 80%); - --pub-tag_simplebadge-background-color: var(--pub-code-background-color); --pub-tag_simplebadge-text-color: var(--pub-default-text-color); --pub-tag_sdkbadge-background-color: #206080; --pub-tag_sdkbadge-separator-color: var(--pub-default-text-color);