Skip to content

fix: FIT-248: Adapt scrollbars to dark mode #7985

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

Merged
merged 14 commits into from
Jul 21, 2025
Merged

fix: FIT-248: Adapt scrollbars to dark mode #7985

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
49f8944
fix: FIT-248: Scrollbars are white on several pages in Dark mode
carly-bartel Jul 15, 2025
f214b02
add styled-scrollbar mixin to sidebarmenu, table and sidepanels
carly-bartel Jul 15, 2025
bf4c934
fixed sidebar-menu content so that there was no horizontal overflow s…
carly-bartel Jul 15, 2025
e9d7883
Apply pre-commit linters
yyassi-heartex Jul 16, 2025
8641cf8
remove custom scrollbar mixins and replaced with global scrollbar style
carly-bartel Jul 17, 2025
ca29823
Merge branch 'fb-fit-248/scrollbars-white' of https://github.com/Huma…
carly-bartel Jul 17, 2025
8a2924a
lint fixes
carly-bartel Jul 17, 2025
83a353e
Update web/libs/editor/src/assets/styles/_mixins.scss
yyassi-heartex Jul 17, 2025
20efab7
Update web/libs/editor/src/assets/styles/_mixins.scss
yyassi-heartex Jul 17, 2025
5ef54bb
Update web/libs/editor/src/assets/styles/_mixins.scss
yyassi-heartex Jul 17, 2025
fe7cb41
Update web/libs/editor/src/assets/styles/_mixins.scss
yyassi-heartex Jul 17, 2025
6338794
Merge branch 'develop' into fb-fit-248/scrollbars-white
yyassi-heartex Jul 21, 2025
b1fa25a
Merge remote-tracking branch 'origin/develop' into fb-fit-248/scrollb…
yyassi-heartex Jul 21, 2025
b676250
make sure we give the test a chance to finish shaking out before we c…
yyassi-heartex Jul 21, 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 web/apps/labelstudio/src/components/SidebarMenu/SidebarMenu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,4 @@
overflow: auto;
padding: 2rem;
}
}
}
39 changes: 11 additions & 28 deletions web/apps/labelstudio/src/pages/CreateProject/Config/Config.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,5 @@
$scroll-width: 5px;

@mixin styled-scroll() {
&::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: var(--color-neutral-border-bolder);
}

&::-webkit-scrollbar-thumb {
background-color: var(--color-neutral-surface);
}
}

.panel {
display: none;
}
Expand All @@ -24,18 +12,18 @@ $scroll-width: 5px;
flex-direction: column;
}

.sidebar-menu__content > .wizard {
.sidebar-menu__content>.wizard {
height: calc(100% + 64px);
margin: -32px -40px;
margin: -32px;
}

.wizard > .configure {
.wizard>.configure {
flex: 1;
min-height: 0;
display: flex;
align-items: stretch;

> * {
>* {
flex: 50%;
}
}
Expand Down Expand Up @@ -254,8 +242,6 @@ $scroll-width: 5px;
display: flex;
flex: 1;
overflow-y: auto;

@include styled-scroll;
}

.configure__tags-link {
Expand Down Expand Up @@ -284,7 +270,7 @@ $scroll-width: 5px;
}

.wizard .configure__visual {
> * {
>* {
border-top: 1px solid var(--color-neutral-border);
padding-top: 16px;
margin-bottom: 16px;
Expand All @@ -301,7 +287,8 @@ $scroll-width: 5px;
}
}

input, select {
input,
select {
padding: 4px 8px;
font: inherit;
color: inherit;
Expand All @@ -316,12 +303,12 @@ $scroll-width: 5px;
color: var(--color-neutral-content);
}

> p {
>p {
line-height: 32px;
color: var(--color-neutral-content-subtler);
}

> p.configure__object-error {
>p.configure__object-error {
line-height: 22px;
margin-top: 8px;
color: var(--color-negative-content);
Expand Down Expand Up @@ -399,8 +386,6 @@ $scroll-width: 5px;
align-items: stretch;
flex: 1;

@include styled-scroll;

.configure__label {
display: flex;
align-items: stretch;
Expand Down Expand Up @@ -545,8 +530,6 @@ $scroll-width: 5px;
flex-direction: column;
color: var(--color-neutral-content);

@include styled-scroll;

h3 {
margin: 8px 0 16px;
font-size: 16px;
Expand Down Expand Up @@ -585,7 +568,7 @@ $scroll-width: 5px;


.main-view {
&__annotation{
&__annotation {
padding: 0;
}
}
Expand All @@ -605,4 +588,4 @@ div[class^="App_menu"]>div {
:global(input.lsf-configure__add:hover) {
color: var(--color-neutral-content);
background: var(--color-primary-emphasis-subtle);
}
}
17 changes: 1 addition & 16 deletions web/libs/editor/src/assets/styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,6 @@
}
}

@mixin styled-scrollbars(){
scrollbar-color: var(--color-neutral-border) var(--color-neutral-background);
scrollbar-width: thin;

&::-webkit-scrollbar{
width: 4px;
height: 4px;
background-color: var(--color-neutral-surface);
}

&::-webkit-scrollbar-thumb{
background: var(--color-neutral-border-boldest);
}
}

@mixin waiting($c1: #efefef, $c2: #fff) {
$base-color: rgba($c2, 0.2);
$accent-color: $c1;
Expand All @@ -46,4 +31,4 @@
100% {
background-position: 37px 0;
}
}
}
4 changes: 1 addition & 3 deletions web/libs/editor/src/components/SidePanels/PanelBase.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,8 +243,6 @@
overflow: hidden auto;
height: calc(100% - var(--header-height));
position: relative;

@include styled-scrollbars;
}

&__resizer {
Expand Down Expand Up @@ -377,4 +375,4 @@
display: block;
}
}
}
}
4 changes: 1 addition & 3 deletions web/libs/editor/src/components/SidePanels/SidePanels.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@
position: relative;
z-index: 1;

@include styled-scrollbars;

& .main-content {
overflow: auto;
padding-bottom: calc(var(--bottombar-height) + 8px);
Expand Down Expand Up @@ -134,4 +132,4 @@
flex: 1;
}
}
}
}
3 changes: 0 additions & 3 deletions web/libs/editor/src/components/SidePanels/TabPanels/PanelTabsBase.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,9 +200,6 @@
overflow: hidden;
height: calc(100% - var(--header-height));
position: relative;

@include styled-scrollbars;

pointer-events: all;
}

Expand Down
4 changes: 1 addition & 3 deletions web/libs/editor/src/components/SidePanels/TabPanels/Tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,6 @@
z-index: 1;
overflow: hidden auto;

@include styled-scrollbars;

& .main-content {
overflow: auto;
padding-bottom: calc(var(--bottombar-height) + 8px);
Expand Down Expand Up @@ -171,4 +169,4 @@
width: 4px;
height: 30px;
}
}
}
1 change: 1 addition & 0 deletions web/libs/editor/tests/e2e/tests/conditional-serialization.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ Scenario("TextArea should not be serialized when parent View is not visible", as
I.dontSee("Y");
I.dontSee("details");

I.wait(1);
I.say("Check serialization - details should not be included");
const result = await LabelStudio.serialize();

Expand Down
51 changes: 44 additions & 7 deletions web/libs/ui/src/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,40 @@ body {
@apply !text-neutral-content !bg-neutral-background;
}

h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
margin: 0;
color: inherit !important;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1em; }
h5 { font-size: 0.83em; }
h6 { font-size: 0.67em; }
h1 {
font-size: 2em;
}

h2 {
font-size: 1.5em;
}

h3 {
font-size: 1.17em;
}

h4 {
font-size: 1em;
}

h5 {
font-size: 0.83em;
}

h6 {
font-size: 0.67em;
}

a {
@apply text-primary-content;
Expand Down Expand Up @@ -94,3 +116,18 @@ a:hover {
pointer-events: all;
}
}

* {
scrollbar-color: var(--color-neutral-border) var(--color-neutral-background);
scrollbar-width: thin;
}

*::-webkit-scrollbar {
width: 4px;
height: 4px;
background-color: var(--color-neutral-surface);
}

*::-webkit-scrollbar-thumb {
background: var(--color-neutral-border-boldest);
}
Loading