From 30ff8f72633a77a081f5f69f8059fc7f6529874d Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Tue, 7 Dec 2021 14:24:54 +0100
Subject: [PATCH] Apply new color system
---
packages/app-shell/src/app-shell.js | 6 +++---
packages/common/styles.js | 13 +++++--------
packages/file-handling/src/file-sink.js | 11 ++++++++++-
packages/file-handling/src/nextcloud-file-picker.js | 6 +++---
packages/file-handling/src/styles.js | 10 +++++-----
packages/qr-code-scanner/src/qr-code-scanner.js | 3 ++-
packages/tooltip/src/info-tooltip.js | 9 +++++++++
packages/tooltip/src/tooltip.js | 5 ++---
8 files changed, 39 insertions(+), 24 deletions(-)
diff --git a/packages/app-shell/src/app-shell.js b/packages/app-shell/src/app-shell.js
index b35a59d1..dd180fc5 100644
--- a/packages/app-shell/src/app-shell.js
+++ b/packages/app-shell/src/app-shell.js
@@ -566,8 +566,8 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
}
header .hd2-left a:hover {
- color: #fff;
- background-color: #000;
+ color: var(--dbp-hover-text);
+ background-color: var(--dbp-hover-base);
}
header .hd2-right {
@@ -579,7 +579,7 @@ export class AppShell extends ScopedElementsMixin(DBPLitElement) {
}
header a {
- color: black;
+ color: var(--dbp-text-dark);
display: inline;
}
diff --git a/packages/common/styles.js b/packages/common/styles.js
index d0e31163..f3da59c9 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -39,7 +39,7 @@ export function getThemeCSS() {
--dbp-text-light: var(--dbp-override-text-light, var(--dbp-override-light, #ffffff));
--dbp-text-dark: var(--dbp-override-text-dark, var(--dbp-override-dark, #000000));
--dbp-text-muted-light: var(--dbp-override-text-muted-light, var(--dbp-override-muted-text, #adadad));
- --dbp-text-muted-dark: var(--dbp-override-text-muted-dark, var(--dbp-override-muted-text, #666666));
+ --dbp-text-muted-dark: var(--dbp-override-text-muted-dark, var(--dbp-override-muted-text, #767676));
--dbp-accent-light: var(--dbp-override-accent-light, var(--dbp-override-primary-bg-color, #c24f68));
--dbp-accent-dark: var(--dbp-override-accent-dark, var(--dbp-override-primary-bg-color, #c24f68));
--dbp-primary-light: var(--dbp-override-primary-light, var(--dbp-override-primary-bg-color, #8ca4eb)); /*remove second value if no app needs to be backported */
@@ -95,7 +95,7 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
}
.input, .textarea, .select select {
- border: solid 1px #aaa;
+ border: solid 1px var(--dbp-text-muted-light);
border-radius: var(--dbp-border-radius);
padding-bottom: calc(.375em - 1px);
padding-left: calc(.625em - 1px);
@@ -176,7 +176,7 @@ export function getGeneralCSS(doMarginPaddingReset = true) {
}
.input, .select select, .textarea {
- background-color: #fff;
+ background-color: var(--dbp-base-light);
border-color: var(--dbp-text-muted-dark);
border-radius: var(--dbp-border-radius);
color: var(--dbp-text-muted-dark);
@@ -426,9 +426,6 @@ export function getButtonCSS() {
// language=css
return css`
button.button, .button, button.dt-button {
- border-style: solid;
- border-color: black;
- border-width: 1px;
border: var(--dbp-border-dark);
border-radius: var(--dbp-border-radius);
color: var(--dbp-text-dark);
@@ -828,8 +825,8 @@ export function getDocumentationCSS() {
}
.documentation a:hover {
- color: #fff;
- background-color: #000;
+ color: var(--dbp-hover-text);
+ background-color: var(--dbp-hover-base);
}
.documentation ul, .documentation ol, .documentation li {
diff --git a/packages/file-handling/src/file-sink.js b/packages/file-handling/src/file-sink.js
index fd79c506..4e9282d1 100644
--- a/packages/file-handling/src/file-sink.js
+++ b/packages/file-handling/src/file-sink.js
@@ -353,13 +353,22 @@ export class FileSink extends ScopedElementsMixin(DbpFileHandlingLitElement) {
.paddle {
position: absolute;
- background-color: #ffffffd1;
top: 0px;
padding: 0px 5px;
box-sizing: content-box;
height: 100%;
}
+ .paddle::before {
+ background-color: var(--dbp-base-light);
+ opacity: 0.8;
+ content: "";
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ }
+
.right-paddle{
right: 0px;
}
diff --git a/packages/file-handling/src/nextcloud-file-picker.js b/packages/file-handling/src/nextcloud-file-picker.js
index e33add26..4e262ceb 100644
--- a/packages/file-handling/src/nextcloud-file-picker.js
+++ b/packages/file-handling/src/nextcloud-file-picker.js
@@ -1465,7 +1465,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
#replace-modal-box input[type="text"]:disabled {
- color: #aaa;
+ color: var(--dbp-text-muted-light);
}
#replace-modal-box .modal-content div {
@@ -1483,7 +1483,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
.breadcrumb {
- border-bottom: 1px solid black;
+ border-bottom: var(--dbp-border-dark);
}
.breadcrumb:last-child, .breadcrumb:first-child {
@@ -1499,7 +1499,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
input:disabled + label {
- color: #aaa;
+ color: var(--dbp-text-muted-light);
}
.inline-block {
diff --git a/packages/file-handling/src/styles.js b/packages/file-handling/src/styles.js
index fa1eed81..da568589 100644
--- a/packages/file-handling/src/styles.js
+++ b/packages/file-handling/src/styles.js
@@ -163,12 +163,12 @@ export function getFileHandlingCss() {
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow{
border-top: none;
- border-bottom: 4px solid #666;
+ border-bottom: 4px solid var(--dbp-text-muted-dark);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow{
border-top: none;
- border-bottom: 4px solid #bbb;
+ border-bottom: 4px solid var(--dbp-text-muted-light);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow{
@@ -178,14 +178,14 @@ export function getFileHandlingCss() {
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow{
- border-top: 4px solid #666;
+ border-top: 4px solid var(--dbp-text-muted-dark);
border-bottom: none;
}
.tabulator-row, .tabulator-row.tabulator-row-even{
padding-top: 10px;
padding-bottom: 10px;
- border-top: 1px solid #eee;
+ border-top: 1px solid var(--dbp-text-muted-light);
}
.tabulator-header{
@@ -222,7 +222,7 @@ export function getFileHandlingCss() {
height: 32px;
width: 32px;
background-color: unset;
- color: black;
+ color: var(--dbp-text-dark);
font-size: 1.3em;
margin-top: -8px;
}
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index 5a8ca9e9..ec65d0a1 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -431,7 +431,8 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
.output {
margin-top: 20px;
- background: #eee;
+ background: var(--dbp-text-muted-light);
+ color: var(--dbp-text-dark);
padding: 10px;
padding-bottom: 0;
}
diff --git a/packages/tooltip/src/info-tooltip.js b/packages/tooltip/src/info-tooltip.js
index 4d3af000..8c8e3192 100644
--- a/packages/tooltip/src/info-tooltip.js
+++ b/packages/tooltip/src/info-tooltip.js
@@ -73,6 +73,15 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
text-decoration-line: underline;
text-decoration-style: dotted;
}
+
+ .tippy-box {
+ background-color: var(--dbp-hover-base);
+ color: var(--dbp-text-light);
+ }
+
+ .tippy-arrow{
+ color: var(--dbp-hover-base);
+ }
`;
}
diff --git a/packages/tooltip/src/tooltip.js b/packages/tooltip/src/tooltip.js
index 3dc58636..8d75a27d 100644
--- a/packages/tooltip/src/tooltip.js
+++ b/packages/tooltip/src/tooltip.js
@@ -58,10 +58,9 @@ export class TooltipElement extends ScopedElementsMixin(DBPLitElement) {
.tooltip-icon {
display: inline;
- /* color: TODO CSS var */
- /* opacity: 0.7; TODO CSS var */
+ color: var(--dbp-secondary-dark);
}
-
+
`;
}
--
GitLab