agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-13 05:33:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #35192 from overleaf/mj-themed-variables-modals

Browse Source 
[web] support themed variables in modals

GitOrigin-RevId: dd841f18b796226c2177dce3cdabf85b19d7f1c3
This commit is contained in:
Mathias Jakobsen
2026-09-17 11:18:24 +00:00
committed by Copybot
parent 8ae794cce3
commit 1db2898241
3 changed files with 23 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/stylesheets/abstracts/themes-common-variables.scss
+10 -2
View File
@@ -1,6 +1,6 @@
/* ====== Semantic CSS color variables that adjust depending on the current theme ====== */
:root {
@mixin dark-themed-variables {
--bg-primary-themed: var(--bg-dark-primary);
--bg-secondary-themed: var(--bg-dark-secondary);
--bg-tertiary-themed: var(--bg-dark-tertiary);
@@ -28,7 +28,7 @@
--premium-gradient-themed: var(--premium-gradient-dark);
}
@include theme('light') {
@mixin light-themed-variables {
--bg-primary-themed: var(--bg-light-primary);
--bg-secondary-themed: var(--bg-light-secondary);
--bg-tertiary-themed: var(--bg-light-tertiary);
@@ -56,3 +56,11 @@
--link-ui-visited-themed: var(--link-ui-visited);
--premium-gradient-themed: var(--premium-gradient);
}
:root {
@include dark-themed-variables;
}
@include theme('light') {
@include light-themed-variables;
}
services/web/frontend/stylesheets/components/modal.scss
+1
View File
@@ -8,6 +8,7 @@
@include light-dropdown-menu;
@include light-notification;
@include form-check-light;
@include light-themed-variables;
.form-control,
.form-control-wrapper {
services/web/frontend/stylesheets/pages/editor/settings.scss
+12 -24
View File
@@ -1,22 +1,10 @@
:root {
--ide-settings-text-color: var(--content-primary);
--ide-settings-section-title-color: var(--content-secondary);
--ide-settings-description-color: var(--content-secondary);
--ide-settings-section-title-border-color: var(--border-divider);
--ide-settings-link-hover-color: var(--link-ui-hover);
--ide-settings-link-hover-bg-color: var(--bg-light-secondary);
--ide-settings-link-active-color: var(--green-70);
--ide-settings-link-active-bg-color: var(--bg-accent-03);
}
@include theme('default') {
.modal-themed {
--ide-settings-text-color: var(--content-primary-dark);
--ide-settings-section-title-color: var(--content-secondary-dark);
--ide-settings-description-color: var(--content-secondary-dark);
--ide-settings-section-title-border-color: var(--border-divider-dark);
--ide-settings-link-hover-color: var(--link-ui-hover-dark);
--ide-settings-link-hover-bg-color: var(--bg-dark-secondary);
--ide-settings-link-active-color: var(--green-10);
--ide-settings-link-active-bg-color: var(--green-70);
}
@@ -49,7 +37,7 @@
align-items: flex-start;
flex-direction: row;
gap: var(--spacing-02);
color: var(--ide-settings-text-color);
color: var(--content-primary-themed);
padding: var(--spacing-02);
border-radius: var(--border-radius-base);
font-size: var(--font-size-02);
@@ -57,19 +45,19 @@
text-decoration: none;
&:visited {
color: var(--ide-settings-text-color);
color: var(--content-primary-themed);
}
&.ide-settings-tab-link-button:hover:not(.active),
&.ide-settings-tab-link-button:focus:not(.active) {
background-color: var(--ide-settings-link-hover-bg-color);
color: var(--ide-settings-text-color);
background-color: var(--bg-secondary-themed);
color: var(--content-primary-themed);
}
&.ide-settings-tab-link-anchor:hover,
&.ide-settings-tab-link-anchor:focus {
color: var(--ide-settings-link-hover-color);
background-color: var(--ide-settings-link-hover-bg-color);
color: var(--link-ui-hover-themed);
background-color: var(--bg-secondary-themed);
}
&.active {
@@ -96,11 +84,11 @@
}
.ide-settings-section-title {
color: var(--ide-settings-section-title-color);
color: var(--content-secondary-themed);
font-size: var(--font-size-01);
line-height: var(--line-height-01);
padding-bottom: var(--spacing-06);
border-bottom: 1px solid var(--ide-settings-section-title-border-color);
border-bottom: 1px solid var(--border-divider-themed);
margin: 0 var(--spacing-04);
}
@@ -123,12 +111,12 @@
}
.ide-setting-title {
color: var(--ide-settings-text-color);
color: var(--content-primary-themed);
font-size: var(--font-size-02);
}
.ide-setting-description {
color: var(--ide-settings-description-color);
color: var(--content-secondary-themed);
font-size: var(--font-size-02);
}
@@ -149,11 +137,11 @@
}
& .form-check-label {
color: var(--ide-settings-text-color);
color: var(--content-primary-themed);
}
& .form-check-label-description {
color: var(--ide-settings-description-color);
color: var(--content-secondary-themed);
}
& .form-check-label,