From 78fd58824992f78ce877f0f44953f7613210694a Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Wed, 26 Jan 2022 18:18:13 +0100
Subject: [PATCH] Adapt new color system
---
packages/app-shell/src/color-mode.js | 2 ++
packages/common/dbp-common-demo.js | 4 ----
packages/common/styles.js | 6 +++---
packages/file-handling/src/nextcloud-file-picker.js | 2 +-
packages/qr-code-scanner/src/qr-code-scanner.js | 2 +-
5 files changed, 7 insertions(+), 9 deletions(-)
diff --git a/packages/app-shell/src/color-mode.js b/packages/app-shell/src/color-mode.js
index e4b94464..e8dfc505 100644
--- a/packages/app-shell/src/color-mode.js
+++ b/packages/app-shell/src/color-mode.js
@@ -46,6 +46,7 @@ export class ColorMode extends ScopedElementsMixin(DBPLitElement) {
connectedCallback() {
super.connectedCallback();
this.updateComplete.then(() => {
+ this.loadTheme("light-theme");
this.detectInitialMode();
});
@@ -182,6 +183,7 @@ export class ColorMode extends ScopedElementsMixin(DBPLitElement) {
position: absolute;
background-color: var(--dbp-base);
z-index: 1000;
+ boader-radius: var(--dbp-border-radius);
}
.extended-menu li {
diff --git a/packages/common/dbp-common-demo.js b/packages/common/dbp-common-demo.js
index 4c85bd23..5b5b2ad3 100644
--- a/packages/common/dbp-common-demo.js
+++ b/packages/common/dbp-common-demo.js
@@ -162,10 +162,6 @@ export class DbpCommonDemo extends ScopedElementsMixin(LitElement) {
<h2>Theming CSS API</h2>
<div class="control">
<ul>
- <li><code>--dbp-primary-light</code>: Primary Light color <div class="demoblock" style="background-color: var(--dbp-primary-light); color: var(--dbp-text)">X</div></li>
- <li><code>--dbp-primary-base</code>: Primary dark color <div class="demoblock" style="background-color: var(--dbp-primary-base); color: var(--dbp-override-text-light);">X</div></li>
- <li><code>--dbp-primary-base</code>: secondary Light color <div class="demoblock" style="background-color: var(--dbp-primary-base); color: var(--dbp-text)">X</div></li>
- <li><code>--dbp-primary-base</code>: secondary dark color <div class="demoblock" style="background-color: var(--dbp-primary-base); color: var(--dbp-override-text-light);">X</div></li>
<!-- TODO -->
<!-- old
<li><code>--dbp-primary-bg-color</code>: Primary background color <div class="demoblock" style="background-color: var(--dbp-primary-bg-color)"></div></li>
diff --git a/packages/common/styles.js b/packages/common/styles.js
index dfbb60da..cf73963f 100644
--- a/packages/common/styles.js
+++ b/packages/common/styles.js
@@ -806,7 +806,7 @@ export function getTagCSS() {
align-items: center;
background-color: var(--dbp-text-muted);
border-radius: var(--dbp-border-radius);
- color: #4a4a4a;
+ color: var(--dbp-text-muted);
display: inline-flex;
font-size: 0.75rem;
height: 2em;
@@ -890,11 +890,11 @@ export function getTagCSS() {
}
.tag:not(body).is-delete:hover, .tag:not(body).is-delete:focus {
- background-color: #e8e8e8;
+ background-color: var(--dbp-text-inverted);
}
.tag:not(body).is-delete:active {
- background-color: #dbdbdb;
+ background-color: var(--dbp-text-inverted);
}
.tag:not(body).is-rounded {
diff --git a/packages/file-handling/src/nextcloud-file-picker.js b/packages/file-handling/src/nextcloud-file-picker.js
index 9ddf2686..d47f79d9 100644
--- a/packages/file-handling/src/nextcloud-file-picker.js
+++ b/packages/file-handling/src/nextcloud-file-picker.js
@@ -2428,7 +2428,7 @@ export class NextcloudFilePicker extends ScopedElementsMixin(DBPLitElement) {
}
.breadcrumb {
- border-bottom: var(--dbp-border-dark);
+ border-bottom: var(--dbp-border);
}
.breadcrumb:last-child, .breadcrumb:first-child {
diff --git a/packages/qr-code-scanner/src/qr-code-scanner.js b/packages/qr-code-scanner/src/qr-code-scanner.js
index e9a95ab0..6849679c 100644
--- a/packages/qr-code-scanner/src/qr-code-scanner.js
+++ b/packages/qr-code-scanner/src/qr-code-scanner.js
@@ -471,7 +471,7 @@ export class QrCodeScanner extends ScopedElementsMixin(DBPLitElement) {
.border{
margin-top: 2rem;
padding-top: 2rem;
- border-top: var(--dbp-border-dark);
+ border-top: var(--dbp-border);
}
#video video, #video{
--
GitLab