agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-05-30 12:24:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #25846 from overleaf/dp-themed-style-variables

Browse Source 
Create themed colour variables and use them in new editor rail

GitOrigin-RevId: 48719f1b29170bcb95d34ecd538554bdf4fad2bb
This commit is contained in:
David
2025-05-29 09:37:37 +01:00
committed by Copybot
parent ecc625d77e
commit bf5c38c5cf
2 changed files with 57 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss
View File

@@ -1,7 +1,55 @@
/* ====== Semantic CSS color variables that adjust depending on the current theme ====== */
:root {
--editor-border-color: var(--neutral-80);
--bg-primary-themed: var(--bg-dark-primary);
--bg-secondary-themed: var(--bg-dark-secondary);
--bg-tertiary-themed: var(--bg-dark-tertiary);
--bg-disabled-themed: var(--bg-dark-disabled);
--content-primary-themed: var(--content-primary-dark);
--content-secondary-themed: var(--content-secondary-dark);
--content-disabled-themed: var(--content-disabled-dark);
--content-placeholder-themed: var(--content-placeholder-dark);
--content-danger-themed: var(--content-danger-dark);
--content-warning-themed: var(--content-warning-dark);
--content-positive-themed: var(--content-positive-dark);
--border-primary-themed: var(--border-primary-dark);
--border-hover-themed: var(--border-hover-dark);
--border-disabled-themed: var(--border-disabled-dark);
--border-active-themed: var(--border-active-dark);
--border-danger-themed: var(--border-danger-dark);
--border-divider-themed: var(--border-divider-dark);
--link-web-themed: var(--link-web-dark);
--link-web-hover-themed: var(--link-web-hover-dark);
--link-web-visited-themed: var(--link-web-visited-dark);
--link-ui-themed: var(--link-ui-dark);
--link-ui-hover-themed: var(--link-ui-hover-dark);
--link-ui-visited-themed: var(--link-ui-visited-dark);
}
@include theme('light') {
--editor-border-color: var(--neutral-20);
--bg-primary-themed: var(--bg-light-primary);
--bg-secondary-themed: var(--bg-light-secondary);
--bg-tertiary-themed: var(--bg-light-tertiary);
--bg-disabled-themed: var(--bg-light-disabled);
--content-primary-themed: var(--content-primary);
--content-secondary-themed: var(--content-secondary);
--content-disabled-themed: var(--content-disabled);
--content-placeholder-themed: var(--content-placeholder);
--content-danger-themed: var(--content-danger);
--content-warning-themed: var(--content-warning);
--content-positive-themed: var(--content-positive);
--border-primary-themed: var(--border-primary);
--border-hover-themed: var(--border-hover);
--border-disabled-themed: var(--border-disabled);
--border-active-themed: var(--border-active);
--border-danger-themed: var(--border-danger);
--border-divider-themed: var(--border-divider);
--border-dark-divider-themed: var(--border-dark-divider);
--link-web-themed: var(--link-web);
--link-web-hover-themed: var(--link-web-hover);
--link-web-visited-themed: var(--link-web-visited);
--link-ui-themed: var(--link-ui);
--link-ui-hover-themed: var(--link-ui-hover);
--link-ui-visited-themed: var(--link-ui-visited);
}

26
services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
View File

@@ -1,27 +1,19 @@
:root {
--ide-rail-background: var(--bg-dark-primary);
--ide-rail-color: var(--content-primary-dark);
--ide-rail-link-background: var(--bg-dark-primary);
body {
--ide-rail-background: var(--bg-primary-themed);
--ide-rail-color: var(--content-primary-themed);
--ide-rail-link-hover-color: var(--content-primary-themed);
--ide-rail-link-background: var(--bg-primary-themed);
--ide-rail-link-hover-background: var(--bg-secondary-themed);
--ide-rail-border-colour: var(--border-divider-themed);
--ide-rail-header-subdued-button-color: var(--content-primary-themed);
--ide-rail-header-subdued-button-hover-background: var(--bg-tertiary-themed);
--ide-rail-link-active-color: var(--green-10);
--ide-rail-link-active-background: var(--green-70);
--ide-rail-link-hover-color: var(--content-primary-dark);
--ide-rail-link-hover-background: var(--bg-dark-secondary);
--ide-rail-border-colour: var(--border-divider-dark);
--ide-rail-header-subdued-button-color: var(--content-primary-dark);
--ide-rail-header-subdued-button-hover-background: var(--bg-dark-tertiary);
}
@include theme('light') {
--ide-rail-background: #fff;
--ide-rail-color: var(--content-primary);
--ide-rail-link-background: #fff;
--ide-rail-link-active-color: var(--green-70);
--ide-rail-link-active-background: var(--bg-accent-03);
--ide-rail-link-hover-color: var(--content-primary);
--ide-rail-link-hover-background: var(--bg-light-secondary);
--ide-rail-border-colour: var(--border-divider);
--ide-rail-header-subdued-button-color: var(--content-primary);
--ide-rail-header-subdued-button-hover-background: var(--bg-light-tertiary);
}
.rail-panel-header {