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.

Sign up for GitHub

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

Dark Theme Fixes #10416

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Dark Theme Fixes #10416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5cac174
Use foreground color for buttons in the common editor toggle. This is…
thsparks Mar 7, 2025
e0c8268
Fix foreground for extension card "extra content" (which to my knowle…
thsparks Mar 7, 2025
2f4b75c
Add alpha 80 and use for foreground of card description content.
thsparks Mar 7, 2025
88bfd9f
Remove inverted class from new asset buttons. They aren't needed sinc…
thsparks Mar 7, 2025
f91d55a
Theme report abuse text inputs
thsparks Mar 7, 2025
90118f5
Fix borders on tables (noticeable in the all projects table view)
thsparks Mar 7, 2025
e50f6ed
Better separation from background for settings menu
thsparks Mar 7, 2025
5e57554
Theme blockly context menu
thsparks Mar 7, 2025
902f9cf
Fix download ... menu colors
thsparks Mar 8, 2025
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
2 changes: 1 addition & 1 deletion react-common/styles/controls/EditorToggle.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@

& > .common-button {
background: none;
color: var(--pxt-neutral-background1);
color: var(--pxt-neutral-foreground1);
transition: color .25s;
margin: 0;
width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion react-common/styles/extensions/ExtensionCard.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
border-top: solid 1px var(--pxt-neutral-stencil1);
flex-shrink: 0;
font-size: 16px;
color: var(--pxt-secondary-background);
color: var(--pxt-neutral-foreground1);

overflow: hidden;
border-bottom-left-radius: 0.5rem;
Expand Down
1 change: 1 addition & 0 deletions react-common/styles/theming/base-theme.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
--pxt-neutral-alpha10: rgba(0, 0, 0, 0.1);
--pxt-neutral-alpha20: rgba(0, 0, 0, 0.2);
--pxt-neutral-alpha50: rgba(0, 0, 0, 0.5);
--pxt-neutral-alpha80: rgba(0, 0, 0, 0.8);

--pxt-link: #3977B4;
--pxt-link-hover: #204467;
Expand Down
11 changes: 8 additions & 3 deletions theme/blockly-core.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -306,21 +306,26 @@ text.blocklyCheckbox {
*******************************/

.blocklyWidgetDiv .blocklyContextMenu {
border: 1px solid rgba(34,36,38,.15);
box-shadow: 0 1px 2px 0 rgba(34,36,38,.15) !important;
background: var(--pxt-neutral-background1);
color: var(--pxt-neutral-foreground1);
border: 1px solid var(--pxt-neutral-stencil1);
box-shadow: 0 1px 2px 0 var(--pxt-neutral-alpha20) !important;
padding: 0 !important;
}

.blocklyWidgetDiv .blocklyContextMenu .goog-menuitem {
margin: 0 !important;
padding: .92857143em 1.14285714em !important;
font: normal 13px @pageFont !important;
background: var(--pxt-neutral-background1);
color: var(--pxt-neutral-foreground1);
}

.blocklyWidgetDiv .blocklyContextMenu .goog-menuitem-highlight, .blocklyWidgetDiv .blocklyContextMenu .goog-menuitem-hover {
border: none !important;
padding: .92857143em 1.14285714em !important;
background: rgba(0,0,0,.05) !important;
background: var(--pxt-neutral-background1-hover) !important;
color: var(--pxt-neutral-foreground1-hover);
}

/*******************************
Expand Down
1 change: 1 addition & 0 deletions theme/color-themes/high-contrast.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@
"pxt-neutral-alpha10": "rgba(255, 255, 255, 0.1)",
"pxt-neutral-alpha20": "rgba(255, 255, 255, 0.2)",
"pxt-neutral-alpha50": "rgba(255, 255, 255, 0.5)",
"pxt-neutral-alpha80": "rgba(255, 255, 255, 0.8)",

"pxt-link": "#807FFF",
"pxt-link-hover": "#1b19ff",
Expand Down
15 changes: 15 additions & 0 deletions theme/common.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -634,6 +634,21 @@ div.simframe > iframe {
position: relative;
}

.hw-button.ui.dropdown .menu {
background: var(--pxt-neutral-background1);
color: var(--pxt-neutral-foreground1);
border: 1px solid var(--pxt-neutral-stencil1);

& > .item {
color: var(--pxt-neutral-foreground1);

&:hover, &:focus {
background: var(--pxt-neutral-background1-hover);
color: var(--pxt-neutral-foreground1-hover);
}
}
}

.ui.button:hover,
.ui.button:focus {
filter: grayscale(.15) brightness(.85) contrast(1.3);
Expand Down
24 changes: 21 additions & 3 deletions theme/semantic-ui-overrides.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ body.pxt-theme-root {
}

.description {
color: var(--pxt-neutral-alpha50);
color: var(--pxt-neutral-alpha80);
}
}

Expand Down Expand Up @@ -115,6 +115,7 @@ body.pxt-theme-root {
.ui.table {
color: var(--pxt-neutral-foreground1);
background: var(--pxt-neutral-background1);
border: 1px solid var(--pxt-neutral-alpha20);

th, tr, i {
color: var(--pxt-neutral-foreground1);
Expand All @@ -129,6 +130,20 @@ body.pxt-theme-root {
}
}
}

tr, th {
border-bottom: 1px solid var(--pxt-neutral-alpha10);
}

tr td {
border-top: 1px solid var(--pxt-neutral-alpha10);
}

td:nth-child(2),
tfoot:not(.full-width) th:nth-child(2),
thead:not(.full-width) th:nth-child(2) {
border-left: 1px solid var(--pxt-neutral-alpha10);
}
}

.ui.header {
Expand All @@ -147,7 +162,8 @@ body.pxt-theme-root {
.dropdown.item .menu, .ui.dropdown .menu {
background: var(--pxt-neutral-background1);
color: var(--pxt-neutral-foreground1);
box-shadow: 0 1px 3px 0 var(--pxt-neutral-alpha10);
box-shadow: 0 1px 3px 0 var(--pxt-neutral-alpha20);
border: 1px solid var(--pxt-neutral-stencil1);

.item {
color: var(--pxt-neutral-foreground1) !important; // override !important in semantic ui
Expand All @@ -173,7 +189,9 @@ body.pxt-theme-root {
color: var(--pxt-neutral-foreground2);
}

.ui.input {
.ui.input,
.ui.form input[type=url],
.ui.form textarea {
background: none;
color: var(--pxt-neutral-foreground2);

Expand Down
4 changes: 2 additions & 2 deletions webapp/src/components/assetEditor/assetGallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ class AssetGalleryImpl extends React.Component<AssetGalleryProps, AssetGallerySt
<AssetTopbar />
<div className={`asset-editor-card-list ${view !== GalleryView.User ? "hidden" : ""}`}>
<AssetCardList assets={filterAssets(userAssets, isBlocksProject)}>
<Button className="create-new inverted"
<Button className="create-new"
Copy link
Contributor

Choose a reason for hiding this comment

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

If I'm understanding your commit comment correctly, this fix is supposed to address microsoft/pxt-arcade#6780. I'm not sure if this fixes the problem in the regular dark theme, but it's still broken in high contrast on the upload target. Sorry if this is unrelated.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That's a different bug. This is actually compensating for the fix for microsoft/pxt-arcade#6775. That bug required an override in arcade-dark css for inverted buttons (see microsoft/pxt-arcade#6785), but that override was also affecting these buttons, which was undesirable.

Ultimately, the inverted class here is unnecessary because the colors are set directly for them, anyway. So the simplest fix is just to remove the inverted class from these elements altogether.

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh, interesting! Thanks for the clarification!

disabled={disableCreateButton}
leftIcon="icon huge add circle"
title={lf("Create a new asset")}
Expand All @@ -142,7 +142,7 @@ class AssetGalleryImpl extends React.Component<AssetGalleryProps, AssetGallerySt
this.assetCreateOptions.map((opt, i) => {
return <Button
key={i}
className="asset-editor-create-button inverted"
className="asset-editor-create-button"
leftIcon={`icon ${opt.icon}`}
label={opt.label}
title={lf("Create a new {0} asset", opt.label)}
Expand Down