Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Alternative box-shadow for dark theme. #8475

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions pkg/web_css/lib/src/_home.scss
Original file line number Diff line number Diff line change
Expand Up @@ -108,14 +108,14 @@
.mini-list-item {
background: var(--pub-neutral-bgColor);
border-radius: 4px;
box-shadow: 0px 2px 7px 0px var(--pub-home_card-box_shadow-color);
box-shadow: var(--pub-box-shadow);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should use something other than shadow at all? just curious.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See the linked articles: the basic suggestion is to use border + lighter background for elevating count out of its surroundings. I still find those mostly flat, and I thought the inset + minimal shadow contrast may be interesting to check out. If that is not winning here, we shall do border + lighter background (though the inset is kind of that, with slight gradient changes).

padding: 28px 30px 30px; // title's top gap is about 2px (30-2 => 28)
margin-bottom: 10px;
min-height: 100px;

&:hover {
background: var(--pub-neutral-hover-bgColor);
box-shadow: 0px 4px 9px 0px var(--pub-home_card_hover-box_shadow-color);
box-shadow: var(--pub-box-hover-shadow);

@media (min-width: variables.$device-desktop-min-width) {
.mini-list-item-body {
Expand Down
15 changes: 11 additions & 4 deletions pkg/web_css/lib/src/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -80,12 +80,23 @@
--mdc-theme-secondary: #0066d9;
--mdc-typography-font-family: var(--pub-default-text-font_family);

// Download chart colors
--pub-downloads-chart-color-0: var(--pub-markdown-alert-note);
--pub-downloads-chart-color-1: var(--pub-markdown-alert-caution);
--pub-downloads-chart-color-2: var(--pub-markdown-alert-tip);
--pub-downloads-chart-color-3: var(--pub-markdown-alert-important);
--pub-downloads-chart-color-4: var(--pub-markdown-alert-warning);
--pub-downloads-chart-color-5: #12a4af;

--pub-box-shadow:
0 0 4px 2px hsla(0, 0%, 100%, 0.08) inset, /* inner "bevel" surface */
0 0 2px 1px hsla(0, 0%, 0%, 0.05), /* contrast border around the box */
0.5px 1px 4px 2px hsla(0, 0%, 0%, 0.02); /* additional shadow */

--pub-box-hover-shadow:
0 0 6px 3px hsla(0, 0%, 100%, 0.08) inset, /* inner "bevel" surface */
0 0 2px 1px hsla(0, 0%, 0%, 0.05), /* contrast border around the box */
0.5px 1px 4px 3px hsla(0, 0%, 0%, 0.04); /* additional shadow */
}

/// Variables that are specific to the light theme.
Expand Down Expand Up @@ -122,9 +133,7 @@
--pub-weekly-chart-tooltip-text-color: var(--pub-color-white);
--pub-detail_tab-admin-color: #990000;
--pub-home_title-text-color: #254a76;
--pub-home_card-box_shadow-color: rgba(0, 0, 0, 0.3);
--pub-home_card_title-text-color: #1967d2;
--pub-home_card_hover-box_shadow-color: rgba(0, 0, 0, 0.4);
--pub-pagination-active-color: var(--pub-link-text-color);
--pub-pagination-inactive-color: #aaaaaa;
--pub-score_label-text-color: #6d7278;
Expand Down Expand Up @@ -179,9 +188,7 @@
--pub-home_title-text-color: #31b0fc;
--pub-weekly-chart-main-color: var(--pub-link-text-color);
--pub-weekly-chart-tooltip-text-color: var(--pub-color-anchorBlack);
--pub-home_card-box_shadow-color: rgba(255, 255, 255, 0.2);
--pub-home_card_title-text-color: var(--pub-home_title-text-color);
--pub-home_card_hover-box_shadow-color: rgba(255, 255, 255, 0.3);
--pub-pagination-active-color: var(--pub-link-text-color);
--pub-pagination-inactive-color: #aaaaaa;
--pub-score_label-text-color: #a0b0b8;
Expand Down
Loading