pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-02-10 18:05:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactoring custom theme colors

Browse Source
This commit is contained in:
Julia Radzhabova
2024-08-06 13:15:13 +03:00
parent c990fb99d1
commit 371cf6c65f
16 changed files with 70 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/common/main/lib/controller/Themes.js
View File

@ -99,7 +99,6 @@ define([
"background-toolbar",
"background-toolbar-additional",
"background-primary-dialog-button",
"background-tab-underline",
"background-notification-popover",
"background-notification-badge",
"background-scrim",
@ -114,10 +113,17 @@ define([
"highlight-primary-dialog-button-hover",
"highlight-header-button-hover",
"highlight-header-button-pressed",
"highlight-toolbar-tab-underline",
"highlight-text-select",
"highlight-accent-button-hover",
"highlight-accent-button-pressed",
"highlight-toolbar-tab-underline-document",
"highlight-toolbar-tab-underline-spreadsheet",
"highlight-toolbar-tab-underline-presentation",
"highlight-toolbar-tab-underline-pdf",
"highlight-header-tab-underline-document",
"highlight-header-tab-underline-spreadsheet",
"highlight-header-tab-underline-presentation",
"highlight-header-tab-underline-pdf",
"border-toolbar",
"border-divider",
@ -247,7 +253,14 @@ define([
if ( !!colors && !!id ) {
var _css_array = [':root .', id, '{'];
for (var c in colors) {
_css_array.push('--', c, ':', colors[c], ';');
if (c==='highlight-toolbar-tab-underline') {
_css_array.push('--', c + '-document', ':', colors[c], ';');
_css_array.push('--', c + '-spreadsheet', ':', colors[c], ';');
_css_array.push('--', c + '-presentation', ':', colors[c], ';');
_css_array.push('--', c + '-pdf', ':', colors[c], ';');
console.log("Obsolete: The 'highlight-toolbar-tab-underline' color for interface themes is deprecated. Please use 'highlight-toolbar-tab-underline-document', 'highlight-toolbar-tab-underline-presentation', etc. instead.");
} else
_css_array.push('--', c, ':', colors[c], ';');
}
_css_array.push('}');

3
apps/common/main/resources/less/asc-mixins.less
View File

@ -853,7 +853,4 @@
border-top-color: @tab-toolbar-pdf-ie;
border-top-color: @tab-toolbar-pdf;
}
//border-top-color: @highlight-toolbar-tab-underline-ie;
//border-top-color: @highlight-toolbar-tab-underline;
}

22
apps/common/main/resources/less/colors-table-classic.less
View File

@ -17,7 +17,6 @@
--background-toolbar-additional: #f1f1f1;
--background-primary-dialog-button: #7d858c;
--background-accent-button: #446995;
--background-tab-underline: #444;
--background-notification-popover: #fcfed7;
--background-notification-badge: #ffd112;
--background-scrim: fade(#000, 20%);
@ -33,11 +32,20 @@
--highlight-accent-button-pressed: #293f59;
--highlight-header-button-hover: fade(#000, 15%);
--highlight-header-button-pressed: fade(#000, 25%);
--highlight-toolbar-tab-underline: #444;
--highlight-text-select: #3494fb;
--highlight-fill-button-hover: #ffe165;
--highlight-fill-button-pressed: #dfb500;
--highlight-header-tab-underline-document: var(--text-toolbar-header);
--highlight-header-tab-underline-spreadsheet: var(--text-toolbar-header);
--highlight-header-tab-underline-presentation: var(--text-toolbar-header);
--highlight-header-tab-underline-pdf: var(--text-toolbar-header);
--highlight-toolbar-tab-underline-document: #446995;
--highlight-toolbar-tab-underline-spreadsheet: #40865c;
--highlight-toolbar-tab-underline-presentation: #BE664F;
--highlight-toolbar-tab-underline-pdf: #AA5252;
--border-toolbar: #cbcbcb;
--border-divider: #cbcbcb;
--border-regular-control: #cfcfcf;
@ -71,16 +79,6 @@
--icon-contrast-popover: #fff;
--icon-success: #5b9f27;
--tab-header-document: var(--text-toolbar-header);
--tab-header-spreadsheet: var(--text-toolbar-header);
--tab-header-presentation: var(--text-toolbar-header);
--tab-header-pdf: var(--text-toolbar-header);
--tab-toolbar-document: #446995;
--tab-toolbar-spreadsheet: #40865c;
--tab-toolbar-presentation: #BE664F;
--tab-toolbar-pdf: #AA5252;
// Canvas
--canvas-background: #e2e2e2;

18
apps/common/main/resources/less/colors-table-dark-contrast.less
View File

@ -17,7 +17,6 @@
--background-toolbar-additional: #2a2a2a;
--background-primary-dialog-button: #E6E6E6;
--background-accent-button: #4d76a8;
--background-tab-underline: #717171;
--background-notification-popover: #5f5d81;
--background-notification-badge: #ffd112;
--background-scrim: fade(black, 60%);
@ -34,7 +33,6 @@
--highlight-accent-button-pressed: #89afdc;
--highlight-header-button-hover: fade(#fff, 20%);
--highlight-header-button-pressed: fade(#fff, 35%);
--highlight-toolbar-tab-underline: #d0d0d0;
--highlight-text-select: #96c8fd;
--highlight-fill-button-hover: #ffe165;
--highlight-fill-button-pressed: #dfb500;
@ -74,15 +72,15 @@
--icon-contrast-popover: #fff;
--icon-success: #090;
--tab-header-document: #446995;
--tab-header-spreadsheet: #40865c;
--tab-header-presentation: #BE664F;
--tab-header-pdf: #AA5252;
--highlight-header-tab-underline-document: #446995;
--highlight-header-tab-underline-spreadsheet: #40865c;
--highlight-header-tab-underline-presentation: #BE664F;
--highlight-header-tab-underline-pdf: #AA5252;
--tab-toolbar-document: #446995;
--tab-toolbar-spreadsheet: #40865c;
--tab-toolbar-presentation: #BE664F;
--tab-toolbar-pdf: #AA5252;
--highlight-toolbar-tab-underline-document: #446995;
--highlight-toolbar-tab-underline-spreadsheet: #40865c;
--highlight-toolbar-tab-underline-presentation: #BE664F;
--highlight-toolbar-tab-underline-pdf: #AA5252;
// Canvas

18
apps/common/main/resources/less/colors-table-dark.less
View File

@ -17,7 +17,6 @@
--background-toolbar-additional: #505050;
--background-primary-dialog-button: #ddd;
--background-accent-button: #486F9E;
--background-tab-underline: #ddd;
--background-notification-popover: #3e5968;
--background-notification-badge: #ffd112;
--background-scrim: fade(black, 60%);
@ -34,7 +33,6 @@
--highlight-accent-button-pressed: #89afdc;
--highlight-header-button-hover: fade(#fff, 15%);
--highlight-header-button-pressed: fade(#fff, 25%);
--highlight-toolbar-tab-underline: #ddd;
--highlight-text-select: #96c8fd;
--highlight-fill-button-hover: #ffe165;
--highlight-fill-button-pressed: #dfb500;
@ -74,15 +72,15 @@
--icon-contrast-popover: #fff;
--icon-success: #090;
--tab-header-document: #446995;
--tab-header-spreadsheet: #40865c;
--tab-header-presentation: #BE664F;
--tab-header-pdf: #AA5252;
--highlight-header-tab-underline-document: #446995;
--highlight-header-tab-underline-spreadsheet: #40865c;
--highlight-header-tab-underline-presentation: #BE664F;
--highlight-header-tab-underline-pdf: #AA5252;
--tab-toolbar-document: #446995;
--tab-toolbar-spreadsheet: #40865c;
--tab-toolbar-presentation: #BE664F;
--tab-toolbar-pdf: #AA5252;
--highlight-toolbar-tab-underline-document: #446995;
--highlight-toolbar-tab-underline-spreadsheet: #40865c;
--highlight-toolbar-tab-underline-presentation: #BE664F;
--highlight-toolbar-tab-underline-pdf: #AA5252;
// Canvas

18
apps/common/main/resources/less/colors-table-gray.less
View File

@ -18,7 +18,6 @@
--background-toolbar-additional: #efefef;
--background-primary-dialog-button: #444;
--background-accent-button: #446995;
--background-tab-underline: #444;
--background-notification-popover: #fcfed7;
--background-notification-badge: #ffd112;
--background-scrim: fade(#000, 20%);
@ -36,7 +35,6 @@
--highlight-accent-button-pressed: #293f59;
--highlight-header-button-hover: #e0e0e0;
--highlight-header-button-pressed: #cbcbcb;
--highlight-toolbar-tab-underline: #444;
--highlight-text-select: #3494fb;
--highlight-fill-button-hover: #ffe165;
--highlight-fill-button-pressed: #dfb500;
@ -76,15 +74,15 @@
--icon-contrast-popover: #fff;
--icon-success: #090;
--tab-header-document: #446995;
--tab-header-spreadsheet: #40865c;
--tab-header-presentation: #BE664F;
--tab-header-pdf: #AA5252;
--highlight-header-tab-underline-document: #446995;
--highlight-header-tab-underline-spreadsheet: #40865c;
--highlight-header-tab-underline-presentation: #BE664F;
--highlight-header-tab-underline-pdf: #AA5252;
--tab-toolbar-document: #446995;
--tab-toolbar-spreadsheet: #40865c;
--tab-toolbar-presentation: #BE664F;
--tab-toolbar-pdf: #AA5252;
--highlight-toolbar-tab-underline-document: #446995;
--highlight-toolbar-tab-underline-spreadsheet: #40865c;
--highlight-toolbar-tab-underline-presentation: #BE664F;
--highlight-toolbar-tab-underline-pdf: #AA5252;
// Canvas

2
apps/common/main/resources/less/colors-table-ie-fix.less
View File

@ -24,7 +24,6 @@
@background-toolbar-tab-ie: #f1f1f1;
@background-toolbar-additional-ie: #f1f1f1;
@background-primary-dialog-button-ie: #7d858c;
@background-tab-underline-ie: #444;
@background-notification-popover-ie: #fcfed7;
@background-notification-badge-ie: #ffd112;
@background-scrim-ie: fade(#000, 20%);
@ -41,7 +40,6 @@
@highlight-primary-dialog-button-hover-ie: #666d73;
@highlight-header-button-hover-ie: fade(#000, 15%);
@highlight-header-button-pressed-ie: fade(#000, 25%);
@highlight-toolbar-tab-underline-ie: #444;
@highlight-text-select-ie: #3494fb;
@highlight-accent-button-hover-ie: #375478;
@highlight-accent-button-pressed-ie: #293F59;

20
apps/common/main/resources/less/colors-table.less
View File

@ -27,7 +27,6 @@
--background-toolbar-additional: #efefef;
--background-primary-dialog-button: #444;
--background-accent-button: #446995;
--background-tab-underline: #444;
--background-notification-popover: #fcfed7;
--background-notification-badge: #ffd112;
--background-scrim: fade(#000, 20%);
@ -45,7 +44,6 @@
--highlight-accent-button-pressed: #293f59;
--highlight-header-button-hover: fade(#000, 15%);
--highlight-header-button-pressed: fade(#000, 25%);
--highlight-toolbar-tab-underline: #444;
--highlight-text-select: #3494fb;
--highlight-fill-button-hover: #ffe165;
--highlight-fill-button-pressed: #dfb500;
@ -85,15 +83,15 @@
--icon-contrast-popover: #fff;
--icon-success: #090;
--tab-header-document: var(--text-toolbar-header);
--tab-header-spreadsheet: var(--text-toolbar-header);
--tab-header-presentation: var(--text-toolbar-header);
--tab-header-pdf: var(--text-toolbar-header);
--highlight-header-tab-underline-document: var(--text-toolbar-header);
--highlight-header-tab-underline-spreadsheet: var(--text-toolbar-header);
--highlight-header-tab-underline-presentation: var(--text-toolbar-header);
--highlight-header-tab-underline-pdf: var(--text-toolbar-header);
--tab-toolbar-document: #446995;
--tab-toolbar-spreadsheet: #40865c;
--tab-toolbar-presentation: #BE664F;
--tab-toolbar-pdf: #AA5252;
--highlight-toolbar-tab-underline-document: #446995;
--highlight-toolbar-tab-underline-spreadsheet: #40865c;
--highlight-toolbar-tab-underline-presentation: #BE664F;
--highlight-toolbar-tab-underline-pdf: #AA5252;
// Canvas
@ -216,7 +214,6 @@
@background-toolbar-tab: var(--background-toolbar-tab);
@background-toolbar-additional: var(--background-toolbar-additional);
@background-primary-dialog-button: var(--background-primary-dialog-button);
@background-tab-underline: var(--background-tab-underline);
@background-notification-popover: var(--background-notification-popover);
@background-notification-badge: var(--background-notification-badge);
@background-scrim: var(--background-scrim);
@ -235,7 +232,6 @@
@highlight-primary-dialog-button-hover: var(--highlight-primary-dialog-button-hover);
@highlight-header-button-hover: var(--highlight-header-button-hover);
@highlight-header-button-pressed: var(--highlight-header-button-pressed);
@highlight-toolbar-tab-underline: var(--highlight-toolbar-tab-underline);
@highlight-text-select: var(--highlight-text-select);
@highlight-accent-button-hover: var(--highlight-accent-button-hover);
@highlight-accent-button-pressed: var(--highlight-accent-button-pressed);

4
apps/common/main/resources/less/variables.less
View File

@ -45,9 +45,9 @@
@toolbar-header-text-on-background-pdf-ie: @text-toolbar-header-on-background-pdf-ie;
@toolbar-header-text-on-background-pdf: var(--text-toolbar-header-on-background-pdf);
@tab-header-pdf-ie: @tab-header-pdf-ie;
@tab-header-pdf: var(--tab-header-pdf);
@tab-header-pdf: var(--highlight-header-tab-underline-pdf);
@tab-toolbar-pdf-ie: @tab-toolbar-pdf-ie;
@tab-toolbar-pdf: var(--tab-toolbar-pdf);
@tab-toolbar-pdf: var(--highlight-toolbar-tab-underline-pdf);
// Scaffolding
// -------------------------

2
apps/common/main/resources/themes/full-theme-dark.json.example
View File

@ -20,7 +20,6 @@
"background-toolbar-additional": "#505050",
"background-primary-dialog-button": "#c681ff",
"background-accent-button": "#486F9E",
"background-tab-underline": "#ddd",
"background-notification-popover": "#3e5968",
"background-notification-badge": "#ffd112",
"background-scrim": "rgba(0, 0, 0, 0.6)",
@ -36,7 +35,6 @@
"highlight-accent-button-pressed": "#89afdc",
"highlight-header-button-hover": "rgba(255, 255, 255, 0.05)",
"highlight-header-button-pressed": "rgba(255, 255, 255, 0.15)",
"highlight-toolbar-tab-underline": "#ddd",
"highlight-text-select": "#96c8fd",
"border-toolbar": "#616161",

2
apps/common/main/resources/themes/full-theme-light.json.example
View File

@ -20,7 +20,6 @@
"background-toolbar-additional": "#efefef",
"background-primary-dialog-button": "#2e8df2",
"background-accent-button": "#446995",
"background-tab-underline": "#444",
"background-notification-popover": "#fcfed7",
"background-notification-badge": "#ffd112",
"background-scrim": "rgba(0, 0, 0, 0.2)",
@ -37,7 +36,6 @@
"highlight-accent-button-pressed": "#293f59",
"highlight-header-button-hover": "rgba(255, 255, 255, 0.15)",
"highlight-header-button-pressed": "rgba(255, 255, 255, 0.25)",
"highlight-toolbar-tab-underline": "#444",
"highlight-text-select": "#3494fb",
"border-toolbar": "#cbcbcb",

4
apps/documenteditor/forms/resources/less/application.less
View File

@ -4,9 +4,9 @@
@header-background-color-ie: @toolbar-header-document-ie;
@header-background-color: var(--toolbar-header-document);
@tab-header-ie: @tab-header-document-ie;
@tab-header: var(--tab-header-document);
@tab-header: var(--highlight-header-tab-underline-document);
@tab-toolbar-ie: @tab-toolbar-document-ie;
@tab-toolbar: var(--tab-toolbar-document);
@tab-toolbar: var(--highlight-toolbar-tab-underline-document);
#editor_sdk {
background-color: #fff;

4
apps/documenteditor/main/resources/less/variables.less
View File

@ -6,9 +6,9 @@
@toolbar-header-text-on-background-ie: @text-toolbar-header-on-background-document-ie;
@toolbar-header-text-on-background: var(--text-toolbar-header-on-background-document);
@tab-header-ie: @tab-header-document-ie;
@tab-header: var(--tab-header-document);
@tab-header: var(--highlight-header-tab-underline-document);
@tab-toolbar-ie: @tab-toolbar-document-ie;
@tab-toolbar: var(--tab-toolbar-document);
@tab-toolbar: var(--highlight-toolbar-tab-underline-document);
// Active color
// -------------------------

4
apps/pdfeditor/main/resources/less/variables.less
View File

@ -6,9 +6,9 @@
@toolbar-header-text-on-background-ie: @text-toolbar-header-on-background-pdf-ie;
@toolbar-header-text-on-background: var(--text-toolbar-header-on-background-pdf);
@tab-header-ie: @tab-header-pdf-ie;
@tab-header: var(--tab-header-pdf);
@tab-header: var(--highlight-header-tab-underline-pdf);
@tab-toolbar-ie: @tab-toolbar-pdf-ie;
@tab-toolbar: var(--tab-toolbar-pdf);
@tab-toolbar: var(--highlight-toolbar-tab-underline-pdf);
// Active color
// -------------------------
//@blue-darker: #00f;

4
apps/presentationeditor/main/resources/less/variables.less
View File

@ -5,9 +5,9 @@
@toolbar-header-text-on-background-ie: @text-toolbar-header-on-background-presentation-ie;
@toolbar-header-text-on-background: var(--text-toolbar-header-on-background-presentation);
@tab-header-ie: @tab-header-presentation-ie;
@tab-header: var(--tab-header-presentation);
@tab-header: var(--highlight-header-tab-underline-presentation);
@tab-toolbar-ie: @tab-toolbar-presentation-ie;
@tab-toolbar: var(--tab-toolbar-presentation);
@tab-toolbar: var(--highlight-toolbar-tab-underline-presentation);
// Grays
// -------------------------

4
apps/spreadsheeteditor/main/resources/less/variables.less
View File

@ -6,9 +6,9 @@
@toolbar-header-text-on-background-ie: @text-toolbar-header-on-background-spreadsheet-ie;
@toolbar-header-text-on-background: var(--text-toolbar-header-on-background-spreadsheet);
@tab-header-ie: @tab-header-spreadsheet-ie;
@tab-header: var(--tab-header-spreadsheet);
@tab-header: var(--highlight-header-tab-underline-spreadsheet);
@tab-toolbar-ie: @tab-toolbar-spreadsheet-ie;
@tab-toolbar: var(--tab-toolbar-spreadsheet);
@tab-toolbar: var(--highlight-toolbar-tab-underline-spreadsheet);
// Active color
// -------------------------
//@green-darker: #0f0;