From 357cfe162794fc4021a440383b33224dc9371e8a Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Tue, 5 Apr 2022 14:37:55 +0200
Subject: [PATCH] Small color system fixes
---
packages/app-shell/src/auth-menu-button.js | 4 +-
packages/file-handling/src/clipboard.js | 2 +-
packages/file-handling/src/file-sink.js | 2 +-
packages/theme-switcher/README.md | 95 +++++++++----------
packages/theme-switcher/src/demo.js | 71 ++++++--------
.../assets/dbp-toolkit-showcase.html.ejs | 61 ++++++------
6 files changed, 112 insertions(+), 123 deletions(-)
diff --git a/packages/app-shell/src/auth-menu-button.js b/packages/app-shell/src/auth-menu-button.js
index b4dcaea1..d580e457 100644
--- a/packages/app-shell/src/auth-menu-button.js
+++ b/packages/app-shell/src/auth-menu-button.js
@@ -150,8 +150,8 @@ export class AuthMenuButton extends ScopedElementsMixin(AdapterLitElement) {
}
.menu a.selected {
- color: var(--dbp-secondary-text);
- background-color: var(--dbp-secondary-base);
+ color: var(--dbp-on-secondary-surface);
+ background-color: var(--dbp-secondary-surface);
}
.dropdown-item {
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index 82cd179c..dfc50819 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -931,7 +931,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
}
.clipboard-footer {
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
width: 100%;
padding-top: 10px;
display: flex;
diff --git a/packages/file-handling/src/file-sink.js b/packages/file-handling/src/file-sink.js
index 88883540..296a4cb5 100644
--- a/packages/file-handling/src/file-sink.js
+++ b/packages/file-handling/src/file-sink.js
@@ -383,7 +383,7 @@ export class FileSink extends ScopedElementsMixin(DbpFileHandlingLitElement) {
}
.paddle::before {
- background-color: var(--dbp-base);
+ background-color: var(--dbp-background);
opacity: 0.8;
content: '';
width: 100%;
diff --git a/packages/theme-switcher/README.md b/packages/theme-switcher/README.md
index 12067a8c..388b16f5 100644
--- a/packages/theme-switcher/README.md
+++ b/packages/theme-switcher/README.md
@@ -23,54 +23,53 @@ applied to the body of your html document. To add a style to the specific class
<style>
.light-theme{
- --dbp-override-base: white;
- --dbp-override-base-inverted: black;
- --dbp-override-text: black;
- --dbp-override-text-inverted: white;
- --dbp-override-text-muted: #767676;
- --dbp-override-accent: #c24f68;
- --dbp-override-primary-base: #2a4491;
- --dbp-override-primary-text: white;
- --dbp-override-primary-surface-border-color: #2a4491;
- --dbp-override-secondary-base: white;
- --dbp-override-secondary-text: black;
- --dbp-override-secondary-surface-border-color: black;
- --dbp-override-info: #2a4491;
- --dbp-override-success: #188018;
- --dbp-override-warning-as-text: #c15500;
- --dbp-override-warning: #f99a41;
- --dbp-override-danger: #de3535;
- --dbp-override-border: 1px solid black;
- --dbp-override-border-radius: 0px;
- --dbp-override-hover-base: black;
- --dbp-override-hover-text: white;
-
- }
-
- .dark-theme{
- --dbp-override-base: #151515;
- --dbp-override-base-inverted: white;
- --dbp-override-text: white;
- --dbp-override-text-inverted: #151515;
- --dbp-override-text-muted: #666666;
- --dbp-override-accent: #c24f68;
- --dbp-override-primary-base: #8ca4eb;
- --dbp-override-primary-text: #151515;
- --dbp-override-primary-surface-border-color: #8ca4eb;
- --dbp-override-secondary-base: #151515;
- --dbp-override-secondary-text: white;
- --dbp-override-secondary-surface-border-color: white;
- --dbp-override-info: #8ca4eb;
- --dbp-override-success: #7acc79;
- --dbp-override-warning-as-text: #f99a41;
- --dbp-override-warning: #f99a41;
- --dbp-override-danger: #de3535;
- --dbp-override-border: 1px solid white;
- --dbp-override-border-radius: 0px;
- --dbp-override-hover-base: white;
- --dbp-override-hover-text: #151515;
-
- }
+ --dbp-override-background: white;
+ --dbp-override-content: black;
+
+ --dbp-override-primary: #2a4491;
+ --dbp-override-secondary: black;
+ --dbp-override-secondary-surface: white;
+ --dbp-override-on-secondary-surface: black;
+ --dbp-override-secondary-surface-border-color: black;
+
+ --dbp-override-muted: #767676;
+ --dbp-override-accent: #c24f68;
+ --dbp-override-info: #2a4491;
+ --dbp-override-success: #188018;
+ --dbp-override-warning: #c15500;
+ --dbp-override-warning-surface: #ffad4d;
+ --dbp-override-on-warning-surface: black;
+ --dbp-override-danger: #de3535;
+
+ --dbp-override-border: 1px solid black;
+
+ --dbp-override-hover-background-color: black;
+ --dbp-override-hover-color: white;
+ }
+
+ .dark-theme{
+ --dbp-override-background: #151515;
+ --dbp-override-content: white;
+
+ --dbp-override-primary: #8ca4eb;
+ --dbp-override-secondary: white;
+ --dbp-override-secondary-surface: #151515;
+ --dbp-override-on-secondary-surface: white;
+ --dbp-override-secondary-surface-border-color: #151515;
+
+ --dbp-override-muted: #666666;
+ --dbp-override-accent: #c24f68;
+ --dbp-override-info: #8ca4eb;
+ --dbp-override-success: #7acc79;
+ --dbp-override-warning: #f99a41;
+ --dbp-override-on-warning-surface: black;
+ --dbp-override-danger: #de3535;
+
+ --dbp-override-border: 1px solid white;
+
+ --dbp-override-hover-background-color: white;
+ --dbp-override-hover-color: #151515;
+ }
</style>
<script type="module" src="node_modules/@dbp-toolkit/theme-switcher/dist/dbp-theme-switcher.js"></script>
```
diff --git a/packages/theme-switcher/src/demo.js b/packages/theme-switcher/src/demo.js
index d1dcba88..7f8725ea 100644
--- a/packages/theme-switcher/src/demo.js
+++ b/packages/theme-switcher/src/demo.js
@@ -45,62 +45,53 @@ export class ThemeSwitcherDemo extends ScopedElementsMixin(LitElement) {
return html`
<style>
- .light-theme {
- /* You must not fill out all vars, if they are not filled in, it would take an appropriate default value */
- --dbp-override-base: white;
- --dbp-override-base-inverted: black;
- --dbp-override-text: black;
- --dbp-override-text-inverted: white;
- --dbp-override-text-muted: #767676;
- --dbp-override-accent: #c24f68;
- --dbp-override-primary-base: #2a4491;
- --dbp-override-primary-text: white;
- --dbp-override-primary-surface-border-color: #2a4491;
- --dbp-override-secondary-base: white;
- --dbp-override-secondary-text: black;
+ .light-theme{
+ --dbp-override-background: white;
+ --dbp-override-content: black;
+
+ --dbp-override-primary: #2a4491;
+ --dbp-override-secondary: black;
+ --dbp-override-secondary-surface: white;
+ --dbp-override-on-secondary-surface: black;
--dbp-override-secondary-surface-border-color: black;
+
+ --dbp-override-muted: #767676;
+ --dbp-override-accent: #c24f68;
--dbp-override-info: #2a4491;
--dbp-override-success: #188018;
- --dbp-override-warning-as-text: #c15500;
- --dbp-override-warning: #f99a41;
+ --dbp-override-warning: #c15500;
+ --dbp-override-warning-surface: #ffad4d;
+ --dbp-override-on-warning-surface: black;
--dbp-override-danger: #de3535;
- --dbp-override-border: 1px solid black;
- --dbp-override-border-radius: 0px;
- /* Remove hover vars if you don't want a hover effect */
+ --dbp-override-border: 1px solid black;
- --dbp-override-hover-base: black;
- --dbp-override-hover-text: white;
+ --dbp-override-hover-background-color: black;
+ --dbp-override-hover-color: white;
}
- .dark-theme {
- /* If you don't want to use an additional theme, then delete the "themes" attribute */
- /* You have to fill out all vars, if you want to use the dark theme, the default values would be the light theme. */
+ .dark-theme{
+ --dbp-override-background: #151515;
+ --dbp-override-content: white;
+
+ --dbp-override-primary: #8ca4eb;
+ --dbp-override-secondary: white;
+ --dbp-override-secondary-surface: #151515;
+ --dbp-override-on-secondary-surface: white;
+ --dbp-override-secondary-surface-border-color: #151515;
- --dbp-override-base: #151515;
- --dbp-override-base-inverted: white;
- --dbp-override-text: white;
- --dbp-override-text-inverted: #151515;
- --dbp-override-text-muted: #666666;
+ --dbp-override-muted: #666666;
--dbp-override-accent: #c24f68;
- --dbp-override-primary-base: #8ca4eb;
- --dbp-override-primary-text: #151515;
- --dbp-override-primary-surface-border-color: #8ca4eb;
- --dbp-override-secondary-base: #151515;
- --dbp-override-secondary-text: white;
- --dbp-override-secondary-surface-border-color: white;
--dbp-override-info: #8ca4eb;
--dbp-override-success: #7acc79;
- --dbp-override-warning-as-text: #f99a41;
--dbp-override-warning: #f99a41;
+ --dbp-override-on-warning-surface: black;
--dbp-override-danger: #de3535;
- --dbp-override-border: 1px solid white;
- --dbp-override-border-radius: 0px;
- /* Remove hover vars if you don't want a hover effect */
+ --dbp-override-border: 1px solid white;
- --dbp-override-hover-base: white;
- --dbp-override-hover-text: #151515;
+ --dbp-override-hover-background-color: white;
+ --dbp-override-hover-color: #151515;
}
</style>
diff --git a/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs b/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
index 86805581..ef38009f 100644
--- a/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
+++ b/toolkit-showcase/assets/dbp-toolkit-showcase.html.ejs
@@ -55,53 +55,52 @@
}
.light-theme{
- --dbp-override-base: white;
- --dbp-override-base-inverted: black;
- --dbp-override-text: black;
- --dbp-override-text-inverted: white;
- --dbp-override-text-muted: #767676;
- --dbp-override-accent: #c24f68;
- --dbp-override-primary-base: #2a4491;
- --dbp-override-primary-text: white;
- --dbp-override-primary-surface-border-color: #2a4491;
- --dbp-override-secondary-base: white;
- --dbp-override-secondary-text: black;
+ --dbp-override-background: white;
+ --dbp-override-content: black;
+
+ --dbp-override-primary: #2a4491;
+ --dbp-override-secondary: black;
+ --dbp-override-secondary-surface: white;
+ --dbp-override-on-secondary-surface: black;
--dbp-override-secondary-surface-border-color: black;
+
+ --dbp-override-muted: #767676;
+ --dbp-override-accent: #c24f68;
--dbp-override-info: #2a4491;
--dbp-override-success: #188018;
- --dbp-override-warning-as-text: #c15500;
- --dbp-override-warning: #f99a41;
+ --dbp-override-warning: #c15500;
+ --dbp-override-warning-surface: #ffad4d;
+ --dbp-override-on-warning-surface: black;
--dbp-override-danger: #de3535;
+
--dbp-override-border: 1px solid black;
- --dbp-override-border-radius: 0px;
- --dbp-override-hover-base: black;
- --dbp-override-hover-text: white;
+ --dbp-override-hover-background-color: black;
+ --dbp-override-hover-color: white;
}
.dark-theme{
- --dbp-override-base: #151515;
- --dbp-override-base-inverted: white;
- --dbp-override-text: white;
- --dbp-override-text-inverted: #151515;
- --dbp-override-text-muted: #666666;
+ --dbp-override-background: #151515;
+ --dbp-override-content: white;
+
+ --dbp-override-primary: #8ca4eb;
+ --dbp-override-secondary: white;
+ --dbp-override-secondary-surface: #151515;
+ --dbp-override-on-secondary-surface: white;
+ --dbp-override-secondary-surface-border-color: #151515;
+
+ --dbp-override-muted: #666666;
--dbp-override-accent: #c24f68;
- --dbp-override-primary-base: #8ca4eb;
- --dbp-override-primary-text: #151515;
- --dbp-override-primary-surface-border-color: #8ca4eb;
- --dbp-override-secondary-base: #151515;
- --dbp-override-secondary-text: white;
- --dbp-override-secondary-surface-border-color: white;
--dbp-override-info: #8ca4eb;
--dbp-override-success: #7acc79;
- --dbp-override-warning-as-text: #f99a41;
--dbp-override-warning: #f99a41;
+ --dbp-override-on-warning-surface: black;
--dbp-override-danger: #de3535;
+
--dbp-override-border: 1px solid white;
- --dbp-override-border-radius: 0px;
- --dbp-override-hover-base: white;
- --dbp-override-hover-text: #151515;
+ --dbp-override-hover-background-color: white;
+ --dbp-override-hover-color: #151515;
}
</style>
--
GitLab